HTML & CSS - Mastery / CSS Grid System

Grid Column & Row Span

🔀 What Is Spanning in CSS Grid?

Spanning allows a grid item to cover multiple rows or columns instead of just one cell. This is powerful for custom layouts like headers, sidebars, footers, etc.

🔢 Basic Properties

🔹 grid-column-start & grid-column-end

These properties define where the item starts and ends across grid columns.

🧠 Explanation of grid-column-start and grid-column-end:

  • Grid columns are numbered starting from 1.

  • grid-column-start: 1; grid-column-end: 4 means the item starts at line 1 and ends just before line 4, so it spans columns 1, 2, and 3.

  • The sidebar spans only column 1.

  • The content spans columns 2 and 3.

🔹 grid-row-start & grid-row-end

These define vertical span—across rows.

🧠 What’s Happening:

  • We have a 2-column grid, and rows are 100px tall by default.

  • .span-row starts at row line 1 and ends at row line 3, so it spans 2 rows.

  • Other items fill the remaining grid cells.

🔹 Shorthand for grid-column-start & grid-column-end

✅ Syntax:

grid-column: start / end;

✅ Example:

grid-column: 1 / 3;

➡️ Starts at column line 1 and ends before column line 3 (spans columns 1 and 2).

🔹 Shorthand for grid-row-start & grid-row-end

✅ Syntax:

grid-row: start / end;

✅ Example:

grid-row: 2 / 4;

➡️ Starts at row line 2 and ends before row line 4 (spans rows 2 and 3).

🧪 Combination of Both

🧠 Summary

Element

Columns

Rows

Description

Header

1 → 3

1 → 2

Full width at the top

Sidebar

1 → 2

2 → 3

Left, 1/3 width, full height

Content

2 → 3

2 → 3

Right, 2/3 width, full height