Nearby lessons
5 of 15📐 CSS Grid: Rows, Columns, and Gaps
📌 What are CSS Grid Rows, Columns, and Gaps?
CSS Grid provides powerful layout capabilities, especially for two-dimensional designs.
In this section, you'll learn how to define gaps, start and end positions, and span rows or columns.
In this section, you'll learn how to define gaps, start and end positions, and span rows or columns.
🔸 Gaps Between Items
| Attribute | Value | Description |
|---|---|---|
column-gap | 20px | Sets space between columns only |
row-gap | 15px | Sets space between rows only |
gap | 10px 20px | Shorthand for row-gap and column-gap |
📏 Column Gap Example
column-gap: 20px adds space only between columnsExample03
📐 Row Gap Example
row-gap: 15px adds space only between rowsExample04
✨ Gap Shorthand Example
gap: 10px 20px shorthand for both row and column gapsExample05