CSS row-gap

The row-gap property in CSS is used to specify the size of the gap between rows in a grid or flex container. This property is particularly useful when working with CSS grid layouts or flexbox, allowing you to control the spacing between rows for better alignment and spacing of content.

Let's see how the row-gap property works with some fictional data examples:

Result:

Row 1

Row 2

In the example above, we have a grid container with two rows, each 100px in height. The row-gap: 20px; property adds a 20px gap between the two rows, creating space between them.

Let's see another example using a flex container:

Result:

Row 1

Row 2

In this example, we have a flex container with two rows stacked vertically. The row-gap: 10px; property adds a 10px gap between the two rows, creating space between them.

By using the row-gap property, you can easily control the spacing between rows in your grid or flexbox layouts, achieving better alignment and layout design.