column-gap sets the horizontal space between columns in a layout container. In CSS Grid and Flexbox, that space is called a gutter—a small breathing room between items. section 13.5 section 12.2
Choose a standard CSS measurement unit for the gap:
- px for a fixed space, such as column-gap: 15px; section 13.5
- em, rem, vw, or vh when the spacing should use another CSS measurement scale. section 13.5
- Use row-gap separately when you also need space between rows. section 13.5 section 12.2
A 15px gutter
Apply the property to the grid container: .container { display: grid; column-gap: 15px; row-gap: 20px; } The columns receive 15px of horizontal separation, while the rows receive 20px. section 13.5
container {
display: grid;
column-gap: col-gap-value;
row-gap: row-gap-value;
}
Use column-gap and row-gap together on a grid container to control each direction independently. section 13.5
container {
display: grid;
gap: col-gap-value row-gap-value;
}
The gap shorthand can set column and row spacing in one declaration; its two values represent the column gap and row gap. section 13.5
