row-gap sets the vertical space between rows in a grid or flex container. Think of it as giving stacked items some breathing room instead of making them huddle together. The spaces between rows and columns are called gutters, and values can use units such as px, em, rem, vw, or vh. section 13.5 section 12.2
Add different gaps to a grid
Set column-gap to 15px and row-gap to 20px on the grid container. The six child items then have 20px of vertical separation between rows and 15px between columns. .container { display: grid; grid-template-columns: 100px 200px 300px; grid-template-rows: 100px 150px; column-gap: 15px; row-gap: 20px; } section 13.5
container {
display: grid;
column-gap: col-gap-value;
row-gap: row-gap-value;
}
Use the longhand properties when columns and rows need different gutter sizes; use the gap shorthand when declaring both together. section 13.5
