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: