How to use the gap property to Set Space In CSS

1. Using the justify-content property.

The gap property in CSS sets space between Flexbox or Grid items. It’s a shorthand for row-gap and column-gap, making it easy to manage spacing consistently without extra margins or padding, improving layout control and readability.

Syntax:

gap: value;

Example: In this example, we are using the gap property along with the flexbox property to add gap between the individual items.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            gap: 20px;
            /* Set the desired spacing between flex items */
        }

        .flex-item {
            background-color: lightblue;
            padding: 10px;
        }

        .geeks {
            font-size: 40px;

            color: #009900;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="geeks">w3wiki</div>
    <h3>Using gap property</h3>
    <div class="flex-container">
        <div class="flex-item">Element 1</div>
        <div class="flex-item">Element 2</div>
        <div class="flex-item">Element 3</div>
    </div>
</body>

</html>

Output:

How to Set Space Between the Flexbox ?

Setting space between Flexbox items involves using properties like justify-content with values like space-between or space-around, and gap, to evenly distribute space between items along the main axis, enhancing layout spacing and alignment in a flexible container.

There are some following approaches:

Table of Content