row-gap

Definition

The 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.

The 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:

.grid-container {
  display: grid;
  row-gap: 20px;
}

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.

The 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.