How CSS Gaps add spaces to enhance your web layouts

CSS provides a variety of ways to lay out elements on a web page, from absolute positioning to grid-based designs. Spacing around and between elements is equally important, and again there are many options. The gap property is a convenient and versatile way to introduce white space and works with several different layout schemes.

What is a gap?

CSS gap is a simple but essential style property that helps define spacing in your design layout. Giving elements space is one of the golden rules of composition that you should apply to achieve an attractive and effective graphic design.

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

All modern browsers support gap properties that complement box model properties such as: margin and padding.

How to write gap properties in CSS

The basic syntax for gap properties is:

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

Each value can be a length or a percentage. column gap is optional. Without this, a single value would apply to both rows and columns. So:

gap: 10em; 

…this means that both rows and columns have a gap of 10 times the current font size. on the other hand,:

gap: 20px 10%; 

…produces a row gap of 20 pixels and a column gap of 1/10 the width of the contained element.

must use gap Use container elements to define the layout rather than elements within the container. This property is intended to create uniform spacing between items rather than the more complex variable spacing.

Using gaps with flexbox

can be used gap Controls the spacing between rows and columns created by flex layout. The flex direction you use in your layout determines whether row or column gaps are applied.

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

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

Generate this layout.

Note that each item within the container uses classic box model properties for spacing (padding and margins). Add a gap:

.flex-layout { gap: 20px; } 

The space between flex items increases, but the space around them does not.

If you want the flex layout to display items in both columns and rows, wrap the items, for example:

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

You can see the effect of both gaps.

Always keep in mind that there are other properties such as: margin and Justification of content, which can affect the spacing between items. Think of the gap as a minimum value, unless you explicitly control all other properties that can affect the spacing.

Using gaps with grids

You can also use gaps in grid layouts. The main difference is that grids are more suited to his two-dimensional layout, so you usually need to specify both row and column gaps.

Like Flex layouts, grids display items next to each other by default, but you can use padding and margins to control the spacing around each item.

.grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}
.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
} 

The result will be a typical grid layout.

Add a gap:

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

Insert spaces between each item.

Notice how the individual row and column gap values ​​are applied here to create a gap between rows that is twice the size (80 pixels) of the gap between columns (40 pixels). Note that if you use a single value, you will be defining the same gap between rows and columns.

Using gaps in multi-column layouts

Gap properties can also be used in column layouts, but in this case only one value is relevant. There are no lines. Multi-column layouts have default gaps.

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

But it is very small, the size is 1em:

This is especially noticeable when changing fonts, especially when justifying text.

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

As a result, lines of text run into each other and become difficult to read.

Specifying a gap increases the spacing between columns, giving you more space.

.column-layout {
    gap: 2em;
} 

Depending on other factors such as column width, 2em or 3em may produce more readable results.

Remember that you can use browser utilities such as Google Chrome's developer tools to check your layout and see how properties such as gaps and margins affect your layout.

If you use two values ​​for the gap, make sure they are correct. The “row, column” order may not be intuitive, but it matches the order of other shortcut properties such as padding and margins.

The exact way you use gaps depends on the layout scheme that applies them. However, in general, if you want a certain amount of space between items, but not around them, you will have to reach into the gap.