Fluid width with equally spaced div using CSS
There are two methods to create equally spaced “div” element using CSS.
Method 1: Using Flexbox technique in CSS
Approach: We can make a container and then set the display property to flex. It creates a Flexbox. Now we can apply flexbox properties to the items of the container. So, we will set justify-content property to space-between to create equal sized “div” elements.
Syntax:
.container {
display: flex;
justify-content: space-between;
}Example 1: The following code illustrates the above concept.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <style> #container { width: 98vw; height: 100vh; border: 2px solid black; /*Making the container a flexbox*/ display: flex; /*Making equal spaced divs*/ justify-content: space-between; background-color: black; } .box { width: 20%; height: 25%; background-color: red; color: white; font-size: 2rem; border: 4px solid white; } </style></head> <body> <div id="container"> <div class="box">Box1</div> <div class="box">Box2</div> <div class="box">Box3</div> <div class="box">Box4</div> </div></body> </html> |
Output:
Equally Spaced div elements using flex property
Method2: Using grid property in CSS
Approach: First we set the display of the container as grid. Then use the gap property of CSS to create equal spaced “div” elements.
Syntax:
.container {
display: grid;
gap: 1rem;
}Example 2: The following code illustrates the above concept.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <style> #container { /* Using the grid property */ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* Making equal spaced divs */ gap: 1rem; } .box { border: 4px solid black; background-color: red; height: 30vh; } </style></head> <body> <div id="container"> <div class="box">Box1</div> <div class="box">Box2</div> <div class="box">Box3</div> <div class="box">Box4</div> </div></body> </html> |
Output:
.png)
