CSS Gap

The CSS gap property is used to create space between Flex Items inside a Flex Container.

Instead of adding margins individually to every item, the gap property provides a simple way to control the spacing between Flex Items.

What is Gap?

Basic Syntax

.container {
    display: flex;
    gap: 20px;
}

In this example, a 20px gap is created between the Flex Items.

Gap Diagram

Example: gap: 20px

The following example creates a 20px space between the three Flex Items.

.container {
    display: flex;
    gap: 20px;
}

Output

Different Gap Values

Row Gap and Column Gap

When Flexbox contains multiple rows or columns, you can control horizontal and vertical spacing separately.

CSS provides two properties: row-gap and column-gap.

1. row-gap

The row-gap property controls the space between Flex Lines.

.container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
}

2. column-gap

The column-gap property controls the space between items along the column direction.

.container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
}

Using row-gap and column-gap Together

You can use both properties together when you need different horizontal and vertical spacing.

.container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 30px;
}

Gap Shorthand

The gap property can also accept two values.

.container {
    display: flex;
    gap: 20px 30px;
}

Gap Syntax Comparison

Gap vs Margin

Real-World Example

Suppose CIIT Training Institute displays multiple technology course cards.

Instead of adding margin to every course card, the parent container can use the gap property.

.courses {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.course {
    background-color: lightblue;
    border: 2px solid blue;
    padding: 20px;
}