Grid Item Placement and Grid Areas

Grid items can occupy multiple cells using line numbers or named layout areas.

grid-column: 1 / 3 spans from the first to the third column grid line, covering two tracks. Similar line references work for grid-row. For readable page layouts, grid-template-areas names a map of cells, and items identify their region using grid-area.

Visual placement does not change DOM or screen-reader reading order. Keep the document source order meaningful and avoid moving important interactive controls far away from their keyboard navigation position.

An item can span tracks with grid lines or be assigned a rectangle of named grid areas.

Make the heading tile cover the first full row.

HTML

<div class="area-grid"><div class="wide">Dashboard title</div><div>Tasks</div><div>Messages</div></div>

CSS

.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 370px; }
.area-grid div { padding: 15px; background: #dbeafe; border-radius: 7px; }
.area-grid .wide { grid-column: 1 / 3; color: #fff; background: #1d4ed8; font-weight: 700; }

Rendered output

Observe: The heading spans both column tracks; Tasks and Messages fill the next row.

Define a compact header, sidebar, content and footer map.

HTML

<div class="area-grid named"><header>Header</header><aside>Sidebar</aside><main>Main</main><footer>Footer</footer></div>

CSS

.area-grid.named { display: grid; grid-template-columns: 95px minmax(0, 1fr); grid-template-areas: "head head" "side main" "foot foot"; gap: 8px; max-width: 385px; }
.area-grid.named header { grid-area: head; background: #1d4ed8; color: white; }
.area-grid.named aside { grid-area: side; background: #bfdbfe; }
.area-grid.named main { grid-area: main; background: #ccfbf1; }
.area-grid.named footer { grid-area: foot; background: #e2e8f0; }
.area-grid.named > * { padding: 12px; border-radius: 6px; }

Rendered output

Observe: The named header and footer each span two columns while the sidebar and main occupy the middle row.

An item can span tracks with grid lines or be assigned a rectangle of named grid areas.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Each named area must form a rectangle; disconnected cells sharing one name are invalid.
• Avoid using visual placement to radically rearrange the reading order of a form or keyboard navigation.

Change the named grid to two rows without a sidebar. Modify both grid-template-areas and the participating items.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Choose explicit line spans for local placement and named areas for larger readable page maps.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.