The CSS gap property adds consistent space between items in a flex or grid container. Unlike padding, it creates gutters between items rather than space inside an item; unlike margins, it expresses container-level spacing directly. section 4.1.2 section 5.1
Use gap when the layout needs deliberate, reusable spacing:
- Set gap: 1rem on a flex container to separate menu items. section 4.1.2
- Store the value in a custom property when the spacing will be reused. section 4.1.2
- Provide two values, such as gap: 0.5em 1em, for separate row and column gutters. section 5.1
- Choose em or rem when spacing should respond to font size; use px when larger box-to-box gaps need not resize. section 12.1.1
A spaced navigation row
A navigation list can combine gap with an automatic inline-start margin on the final item: .site-nav { display: flex; gap: 1.5rem; } and .nav-right { margin-inline-start: auto; }. Gap separates every item, while the auto margin pushes the final item to the far edge. Applying that margin to an earlier item would shift the items that follow it. section 4.1.2
Listing 5.2 Laying out a basic grid
.grid {
display: grid; #1
grid-template-columns: 1fr 1fr 1fr; #2
grid-template-rows: 1fr 1fr; #3
gap: 0.5em; #4
}
.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
border-radius: 0.5em;
}
Inspect a three-column, two-row grid that uses gap: 0.5em to show gutters between six cells. section 5.1
