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 columnsCode Example
PREVIEW READY
📐 Row Gap Example
row-gap: 15px adds space only between rowsCode Example
PREVIEW READY
✨ Gap Shorthand Example
gap: 10px 20px shorthand for both row and column gapsCode Example
PREVIEW READY
Keep Going!CSS - Grid Container