The gap property (formerly known as grid-gap) is a shorthand CSS property used to define the gutters or spaces between rows and columns in grid and flexbox layouts.

The Syntax

The syntax is straightforward. You can define a single value for both axes or separate values for rows and columns.

/* One value: row and column gap are 20px */
gap: 20px;

/* Two values: row gap is 10px, column gap is 50px */
gap: 10px 50px;

Row and Column Gap

If you need to be explicit, you can use the longhand properties:

• row-gap: Sets the space between rows.
• column-gap: Sets the space between columns.

Legacy Support: grid-gap

In earlier versions of the CSS Grid specification, this property was called grid-gap. While modern browsers support both, gap is the standard and should be preferred as it also works with Flexbox.