Jump Links

CSS offers many ways to lay out elements on your web pages, from absolute positioning to grid-based design. The spacing around and between elements is just as important and, again, there are many options. The gap property is a useful and versatile way of introducing white space, and it works with several different layout schemes.

What Is gap?

CSS gap is a simple yet essential style property to help define the spacing of your design layouts. Giving your elements space is one of the golden rules of composition that you should apply for pleasing, effective graphic design.

You can use this property to specify the size of the gaps between items in three layout formats:

All modern browsers support the gap property which complements box-model properties like margin and padding.

How to Write the CSS gap Property

The basic syntax for the gap property is:

 gap: <row-gap> <column-gap>;

Each value can take a length or a percentage, and column-gap is optional; without it, a single value would apply to both rows and columns. So:

 gap: 10em;

...means that both rows and columns will have a gap of 10 times the current font size, while:

 gap: 20px 10%;

...will produce a row gap of 20 pixels and a column gap that is one-tenth of the containing element's width.

You should use gap with container elements that define the layout, rather than elements within the container. The property aims to create uniform space between items rather than more complex, variable spacing.

Using gap With Flexbox

You can use gap to control the space between the rows and columns that a flex layout creates. The flex-direction your layout uses will determine whether the row gap or column gap applies.

By default, in the normal row direction, items within a flex container will appear next to each other. So this simple CSS:

 .flex-layout {
    display: flex;
}

.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
}

Produces this layout:

A Flex layout showing three elements alongside each other.
Screenshot by Bobby Jack for MUO

Note that each item within the container uses classic box-model properties for spacing: padding and margin. Adding some gap:

 .flex-layout { gap: 20px; }

Will increase the space between flex items, but not around them:

A Flex layout showing three elements alongside each other with gaps in between.
Screenshot by Bobby Jack for MUO

If your flex layout displays items across both columns and rows—by wrapping items, for example:

 .flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
}

You'll see the effect of both gaps:

A Flex layout showing three elements across two rows with horizontal and vertical gaps.
Screenshot by Bobby Jack for MUO

Always bear in mind that other properties, like margin and justify-content, can affect the space between items. Think of gap as a minimum value unless you are explicitly controlling all other properties that can affect spacing.

Using gap With Grid

You can also use gap with a Grid layout. The main difference is that you'll usually want to specify both row and column gaps since Grid is more suited to two-dimensional layouts.

As in a Flex layout, Grid will display items right next to each other by default, although you can control the spacing around each item using padding and margin:

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}

.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
}

The result is a typical grid layout:

A Grid layout showing nine elements with margins around them.
Screenshot by Bobby Jack for MUO

Adding a gap:

 ​.grid-layout {
    gap: 80px 40px;
}

Will insert space between each item:

A Grid layout showing nine elements with margins around them and large gaps between them.
Screenshot by Bobby Jack for MUO

Note how the individual values for the row and column gap apply here, creating a gap between rows that is twice the size (80px) of the gap between columns (40px). Remember that, if you use a single value, you’ll be defining the same gap between rows and columns.

Using gap With Multi-Column Layouts

You can use the gap property with column layouts too, but only a single value is relevant in this case; there are no rows. Multi-column layouts have a default gap:

 .column-layout {
    column-count: 3;
}

But it’s very small, at a size of 1em:

A three-column layout showing a paragraph of sample text.
Screenshot by Bobby Jack for MUO

This is particularly noticeable when varying the font and, especially, if you’re justifying the text:

 .column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
}

The resulting lines of text run into each other and become uncomfortable to read:

A three-column layout showing justified text with very small gaps between columns.
Screenshot by Bobby Jack for MUO

By specifying a gap, you can increase the space between columns, giving them more room to breathe.

 .column-layout {
    gap: 2em;
}

You may find that 2em or even 3em give a more readable result, depending on other factors like the width of your columns:

A three-column layout showing justified text with gaps between columns.
Screenshot by Bobby Jack for MUO

Remember that you can use a browser utility like Google Chrome’s Dev Tools to check your layouts and see how properties like gap and margin affect your layouts.

When using two values for gap, check that you have them the right way round. The "row, column" order can be unintuitive, but it matches the order of other shortcut properties like padding and margin.

The exact way you’ll use gap will vary depending on which layout scheme you’re applying it to. In general, however, you should reach for gap when you need regular space between items, but not around them.