gridrowgap

grid-row-gap is a CSS property used in the CSS Grid Layout module to specify the vertical spacing between grid rows inside a grid container. It controls the amount of space that appears between adjacent rows, helping to separate grid items without relying on margins on individual items. The value can be a length (such as px, em, rem) or a percentage, and the initial value is 0.

In practice, grid-row-gap is the longhand form of the first value of the gap shorthand. The gap property can set both row and column gaps at once, for example gap: 16px 24px; where the first value defines the row gap and the second defines the column gap. For code that only needs to adjust the vertical spacing, grid-row-gap remains a concise option, though the more general gap shorthand is typically preferred for new layouts.

Usage example: a grid container with three equal columns and a 16-pixel row gap would include rules such as display: grid; grid-template-columns: repeat(3, 1fr); grid-row-gap: 16px;. This ensures consistent vertical spacing between rows as items wrap or flow into subsequent rows.

Compatibility and notes: grid-row-gap is widely supported in modern browsers and is part of standard CSS Grid practices. As gap shorthand has become the recommended approach, many developers prefer using gap when both row and column gaps are needed. The longhand grid-row-gap remains available for clarity or specific incremental styling.