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?

CSSgapis a simple yet essential style property to help define the spacing of your design layouts. Giving your elements space is one ofthe golden rules of compositionthat 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:

A Flex layout showing three elements alongside each other.

All modern browsers support the gap property which complements box-model properties likemarginandpadding.

How to Write the CSS gap Property

The basic syntax for the gap property is:

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

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

A Flex layout showing three elements alongside each other with gaps in between.

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

You should usegapwith 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.

A Flex layout showing three elements across two rows with horizontal and vertical gaps.

Using gap With Flexbox

You can usegapto 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:

A Grid layout showing nine elements with margins around them.

Produces this layout:

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

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

A Grid layout showing nine elements with margins around them and large gaps between them.

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

You’ll see the effect of both gaps:

Always bear in mind that other properties, likemarginandjustify-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 may 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 may control the spacing around each item using padding and margin:

The result is a typical grid layout:

Adding a gap:

Will insert space between each item:

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 may 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:

But it’s very small, at a size of1em:

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

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

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

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

Remember that you may use a browser utility likeGoogle Chrome’s Dev Toolsto 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.