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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!