CSS row-gap Property

Overview

This lecture explains the CSS row-gap property, which sets the spacing (gutter) between rows in grid, flex, and multi-column layouts.

What is row-gap?

• row-gap sets the space between rows in CSS grid, flex, or multi-column containers.
• Originally named grid-row-gap; browsers still accept this alias for legacy support.
• Widely supported across modern browsers since October 2017.

Syntax and Values

• Accepts <length> (e.g., 20px, 1em, 3vmin, 0.5cm) or <percentage> (relative to container size).
• Example usage:
  • row-gap: 20px;
  • row-gap: 10%;
• Accepts global values: inherit, initial, revert, revert-layer, and unset.
• Default value is normal, which usually computes to zero except for multi-column elements.

Usage Examples

• In flex layout:
  • display: flex; flex-wrap: wrap; row-gap: 20px;
• In grid layout:
  • display: grid; grid-template-rows: repeat(3, 1fr); row-gap: 20px;
• Setting row-gap creates vertical space between child elements in the container.

Technical Details

• Applies to multi-column elements, flex containers, and grid containers.
• Not inherited by default.
• Percentages are based on the content area dimension.
• Animatable as length, percentage, or using calc().

Related Properties

• column-gap controls spacing between columns.
• gap is a shorthand for setting both row-gap and column-gap.
• Gutters refer to the space controlled by row-gap and column-gap.

Key Terms & Definitions

• row-gap — CSS property that sets gap size between rows in grid, flex, or multi-column layouts.
• gutter — The spacing between rows or columns in a layout.
• <length> — Numeric value with units (e.g., px, em) specifying gap size.
• <percentage> — Value relative to the dimension of the container (height for rows).

Action Items / Next Steps

• Practice using row-gap in grid and flexbox layouts.
• Review gap and column-gap for combined and column spacing.