CSS gap
The gap property sets the space between items in a grid or flex container, without adding space around the outside edges. Pick a value below to see it live, or type your own.
LIVEPreview
1
2
3
4
5
6
CSSCode
The gap property sets the space between items in a grid or flex container, without adding space around the outside edges. Pick a value below to see it live, or type your own.
gap: <row-gap> <column-gap>; gap: 16px; /* same space between rows and columns */ gap: 1rem 3rem; /* 1rem between rows, 3rem between columns */
gap is shorthand for row-gap and column-gap, which you can also set separately.
With margins, the outer items also get spacing on their outside edges, so you end up writing :last-child fixes or negative margins. gap only adds space between items, and it stays correct when items wrap onto a new line.
/* Before: margins and a fix for the last item */
.cards > * { margin-right: 16px; }
.cards > *:last-child { margin-right: 0; }
/* After */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
gap works in grid, flexbox and multi-column layouts. Flexbox support arrived later than grid (Chrome 84, Firefox 63, Safari 14.1), but every current browser supports it. You may still see the older grid-gap name in tutorials; it is an alias that still works.
Yes, in all current browsers. Very old Safari versions (before 14.1) only supported gap in grid layouts.
grid-gap is the older name from when gap only applied to grid. They do the same thing; use gap.
Yes. Percentages are calculated from the container size, so the spacing scales with the layout.