CSS gap Property
The gap property sets the gaps (gutters) between rows and columns in flexbox, CSS grid, and multi-column layouts.
Description & Usage
The gap property (formerly grid-gap) sets the gutters between rows and columns in flexbox and grid containers.
Unlike traditional margin spacing, gap only applies space between adjacent child elements. It eliminates the need for tricky CSS selectors like :not(:last-child) or negative margin wrapper hacks.
Specifying a single value (e.g. gap: 1rem) sets equal row and column spacing, while two values (e.g. gap: 1rem 2rem) set row gap and column gap independently.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Layout |
| Initial Value | normal (0) |
| Inherited | No (not inherited) |
| Applies To | Flex, Grid, and Multi-column containers |
Syntax
gap: <row-gap> <column-gap> | 1rem | 20px;Property Values
| Value | Description |
|---|---|
| 1rem | Sets 1rem gap between both rows and columns. |
| 1rem 2rem | Sets 1rem row gap and 2rem column gap. |
Code Examples
Spacing Flexbox Items
.flex-group {
display: flex;
gap: 1.25rem;
}
Adds 1.25rem spacing between flex items without margin collapse issues.