gap
Sets the spacing between items in a flex, grid, or multi-column container.
- Initial value
normal- Inherited
- No
- Animatable
- yes, as a length or percentage
- Applies to
- flex, grid, and multi-column containers
- JavaScript
element.style.gap = "12px"
Example
#.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}<div class="grid stage">
<div class="box">1</div><div class="box">2</div><div class="box">3</div>
<div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>Definition and usage
#The gap property adds space only between items, never at the edges of the container. Itâs a shorthand for row-gap (the gap between rows) and column-gap (between columns). One value sets both, two values set rows and columns separately.
Before gap worked in Flexbox, spacing was done with margins, and you had to remove the margin on the last item. Today one line handles it, including when items wrap onto several lines.
The value can be a length or a percentage. Gaps donât take a color; for dividing lines, use borders on the items or the containerâs background.
Syntax
#gap: <row-gap> <column-gap>?;Values
#Values in practice
#0
.demo { gap: 0; }12px
.demo { gap: 12px; }24px 6px
.demo { gap: 24px 6px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Instead of margins on list items, set
gapon the container. You wonât have to worry about the first and last item. - Set the spacing from the containerâs edge with the containerâs
padding;gapdoesnât add it.
Related entries
#- row-gapSets the spacing between rows in a flex or grid container.
- column-gapSets the spacing between columns in a flex, grid, or multi-column container.
- flex-wrapLets flex items wrap onto new lines when there isnât enough room.
- grid-template-columnsDefines the gridâs columns: their number and widths.
Spotted a mistake or missing an example? Write to us.