Use CSS Grid for Two-Dimensional Layout Without Extra Wrappers

You need a header that spans two columns and a sidebar that spans two rows, and you do not want extra wrapper divs to force that alignment. CSS Grid solves this by moving layout logic to the parent container. Define columns and rows on the container, then place direct children by grid lines. The result is a stable two-dimensional structure that stays aligned as content changes.

The useful takeaway is to keep the explicit grid small and intentional, and let placement properties do the work. Use fractional units for flexible columns, auto for content-sized rows, and gap for consistent gutters. Place items with grid-column and grid-row rather than nesting flex containers.

Explicit tracks with a concrete placement

A container becomes a grid with display: grid. grid-template-columns defines the column tracks, grid-template-rows defines row tracks, and gap sets the space between tracks. fr is a fractional unit that distributes remaining space.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
}
.item-a {
  grid-column: 1 / 3;
  grid-row: 1;
}
.item-b {
  grid-column: 3;
  grid-row: 1 / 3;
}

This creates three equal flexible columns, two automatic rows, and a 1rem gap. item-a starts at line 1 and ends at line 3 in the first row, so it spans the first two columns. item-b sits in column 3 and spans from row line 1 to line 3, covering both rows. Only direct children of .container become grid items.

Implicit tracks and sizing control

If items are placed outside the explicit tracks, the browser creates an implicit grid. Implicit tracks are sized by grid-auto-columns and grid-auto-rows, which default to auto. That can silently add extra rows or columns and break alignment.

Content-based keywords like min-content and max-content are supported but can produce unexpectedly large tracks when an item contains an unbreakable string or wide image. For predictable overflow, prefer minmax() with fr units.

Limits, common mistakes, and verification

Subgrid with grid-template-columns: subgrid lets a nested grid inherit parent tracks, but support is recent and may be absent in older stable browsers still in use.

Common mistakes include assuming gap works identically in legacy prefixed implementations, misordering grid-area shorthand which accepts row-start, column-start, row-end, column-end, and using absolute positioning inside a grid without understanding the containing block behavior.

Grid is overkill for purely one-dimensional layouts. Flexbox is simpler for a single row or column.

Verification: load the page in a modern browser, open DevTools, select the grid container, and confirm the layout pane shows grid lines and tracks matching grid-template-columns and grid-template-rows. Use @supports (display: grid) { ... } to apply grid styles only when supported and provide a block or flexbox fallback for older browsers. Resize the viewport and inspect computed styles to verify fr units distribute available space and gap remains consistent between tracks.

Internet Explorer 11 implements only the 2012 prefixed grid specification -ms-grid and does not support modern display: grid syntax.