CSS Grid Placement and Areas

Place items precisely in a grid using grid-column, grid-row, and named grid-template-areas.

Overview

By default, grid items flow automatically into the next available cell. But CSS Grid also lets you place items precisely using line numbers or named areas. **Line-based placement:** - `grid-column: 1 / 3` item spans from column line 1 to line 3 (two columns wide) - `grid-row: 1 / 2` item in the first row - `grid-column: span 2` span 2 columns from wherever the item naturally falls **Grid template areas:** You can name regions of the grid and assign items to them by name: ``` grid-template-areas: "header header" "sidebar main" "footer footer"; ``` Then place items: `grid-area: header;`. This is the most readable approach for page layouts.

Key Points

•grid-column: 1 / 3 spans from column line 1 to line 3 (2 columns wide)
•grid-column: span 2 spans 2 columns from the item's natural position
•grid-area: name places an item in a named area
•grid-template-areas draws the layout as ASCII art highly readable
•A dot (.) in a grid-template-areas string creates an empty cell
•Items can overlap in the same cells use z-index to control stacking

Examples

Spanning columns and rows

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

.featured {
  grid-column: 1 / 3;   /* spans columns 1–2 */
  grid-row: 1 / 3;      /* spans rows 1–2 */
}

Grid line numbers start at 1. "1 / 3" means from line 1 to line 3, occupying 2 columns.

Named template areas page layout

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

This defines a classic webpage layout in a few lines of CSS no floats, no absolute positioning.

span keyword

.item-wide {
  grid-column: span 2;  /* span 2 columns from natural position */
}

.item-tall {
  grid-row: span 3;     /* span 3 rows tall */
}

Common Mistakes

Confusing column numbers (index starting at 1) with column count
Using grid-column: 2 / 3 to span 2 columns it only spans 1 (line 2 to line 3)
Not setting grid-template-areas on the parent when using grid-area on children

Note

For full page layouts, grid-template-areas is the most maintainable approach. Draw your layout first, name the regions, and CSS translates your sketch directly into working code.

CSS Grid Placement and Areas

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does "grid-column: 1 / 3" mean?