CSS gap Property

Last Updated : 8 Dec, 2025

The CSS gap property defines the spacing (or "gap") between rows and columns in layouts such as Flexbox, Grid, or multi-column layouts. It simplifies the process of creating consistent spacing by combining row-gap and column-gap into one property. You can specify the gap using length units (e.g., px, em) or percentages.

Syntax:

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

row-gap: Defines the gap between rows.
column-gap: Defines the gap between columns.

Property Values

Property Value	Description
<length>	Specifies the spacing using length units like `em`, `px`, etc. For example: `gap: 10px 20px`.
<percentage>	Specifies the spacing using percentage units. For example: `gap: 50%`.

CSS gap Property Examples

Here are examples of the CSS gap property to illustrate its use in layouts:

Example 1: Using Length Units

In this example we are using CSS Grid with specified row and column gaps (gap: 20px 50px) for layout spacing between grid items (col divs).

Output:

👁 Image

Example 2: Using Percentage Units

In this example we are using CSS Grid with a row gap specified as a percentage (gap: 20%) for layout spacing between grid items (col divs) within each row (row divs).

Output:

👁 Image