Fluid Width with Equally Spaced Div using CSS

Last Updated : 10 Oct, 2024

Fluid width with equally spaced divs in CSS refers to a layout where multiple div elements adjust their width according to the parent container's size, maintaining equal spacing between them. This is typically achieved using Flexbox or CSS Grid, ensuring responsiveness across different screen sizes.

Here we have some common approaches:

Table of Content

Using the Flexbox technique in CSS
Using grid property in CSS

Method 1: Using the Flexbox technique in CSS

Using the Flexbox technique, a container is set to display: flex, allowing its child elements to adjust fluidly. By applying justify-content: space-between, equal spacing is achieved among div elements, ensuring a responsive layout that adapts to varying screen sizes.

Syntax

.container {
    display: flex;
    justify-content: space-between;
}

Example : Here we creates a responsive layout with four equally spaced red boxes inside a black container using Flexbox. Each box has a white border and displays its label in large text.

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

Using the grid property in CSS, set the container's display to grid and define the grid-template-columns for column distribution. Utilize the gap property to create equal spacing between grid items, resulting in a flexible and responsive layout.

Syntax

.container {
    display: grid;
    gap: 1rem;
}

Example : In this example we are using CSS Grid to create a responsive layout with four red boxes arranged in a grid. Each box has a black border and a consistent height, with gaps between them.

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>