row-gap CSS property is used to specify the gap or spacing between rows in a CSS Grid layout. It allows you to control the vertical spacing between grid rows, creating consistent and visually appealing layouts.
row-gap property accepts a length value or a percentage value. It represents the size of the gap between rows, specifying the distance between the bottom edge of one row and the top edge of the next row.
Here’s an example:
In this example, the
.grid-container class sets a CSS Grid layout using
display: grid;. The
row-gap: 20px; rule sets a vertical gap of
20 pixels between the rows of the grid. This creates a consistent spacing between rows, improving the readability and visual structure of the layout.
You can adjust the value of
row-gap to suit your design requirements. By increasing or decreasing the value, you can control the amount of spacing between rows, creating more or less separation as needed.
row-gap property is particularly useful in CSS Grid layouts, allowing you to easily control the vertical spacing between rows. It provides flexibility in designing grid-based interfaces, ensuring a well-structured and organized presentation of content.