CSS gap Property (original) (raw)
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: Defines the gap between rows.
- column-gap: Defines the gap between columns.
Property Values
| Property Value | Description |
|---|---|
| Specifies the spacing using length units like em, px, etc. For example: gap: 10px 20px. | |
| 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).
HTML `