A single gap value applies identically to both row and column gaps, while two values set row-gap first, then column-gap separately — critically, gap only inserts space between grid tracks, it never adds any space at the grid container's own outer edges, meaning a grid with gap: 20px still has its first and last items sitting flush against the container's boundary, with padding on the container itself needed for outer spacing instead. gap is also now supported for flexbox containers in modern browsers, not just grid, providing the same clean, consistent inter-item spacing without needing margin-based workarounds.
1Understanding Grid-gap
A single gap value applies identically to both row and column gaps, while two values set row-gap first, then column-gap separately — critically, gap only inserts space between grid tracks, it never adds any space at the grid container's own outer edges, meaning a grid with gap: 20px still has its first and last items sitting flush against the container's boundary, with padding on the container itself needed for outer spacing instead. gap is also now supported for flexbox containers in modern browsers, not just grid, providing the same clean, consistent inter-item spacing without needing margin-based workarounds.
Use gap instead of adding margin to individual grid items for spacing — gap only affects the space between tracks, never adding unwanted extra space at the grid's own outer edges the way margins on edge items typically would.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}2Practical Example
Here is a real-world application of Grid-gap showing how it is used in production CSS code.
.grid {
display: grid;
gap: 10px 30px;
}3Best Practices
Follow these guidelines when working with Grid-gap:
1. Use gap for spacing between grid rows/columns, rather than margins on individual items, avoiding the extra outer-edge spacing margins would introduce on edge items
2. Add padding to the grid container itself, separately from gap, when outer edge spacing around the whole grid is also needed
3. Use gap on flexbox containers too in modern browsers, for the same clean inter-item spacing without needing older margin-based spacing workarounds
Tip: Use gap instead of adding margin to individual grid items for spacing — gap only affects the space between tracks, never adding unwanted extra space at the grid's own outer edges the way margins on edge items typically would.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}