Grid Placement & Spanning

By default, grid items fill cells in order. You can manually place items using grid lines or named areas.

Column / Row Spanning

grid-column: 1 / 3 — Start at line 1, end at line 3 (spans 2 columns)
grid-column: span 2 — Span 2 columns from wherever it starts
grid-row: 1 / 3 — Span 2 rows

Shorthand Placement

grid-column: 2 — Place in column 2
grid-area: 1 / 1 / 3 / 4 — row-start / col-start / row-end / col-end

Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.header {
  grid-column: 1 / -1;  /* -1 = last line (full width) */
}

.sidebar {
  grid-row: span 2;      /* spans 2 rows */
}

.featured {
  grid-column: 2 / 4;   /* columns 2–4 */
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned