CSS Grid fundamentals: real two-dimensional page layout

Flexbox, covered in parts 9 and 10, arranges items along one real axis at a time — a row, or a column. CSS Grid is a genuinely different tool: a real, two-dimensional system that controls rows and columns simultaneously. This part uses it for Bright Leaf Coffee's actual homepage-level layout.

The real, genuine difference from Flexbox

Flexbox: one-dimensional — you arrange items in a row OR a column,
  and items flow based on their own individual sizing
Grid: two-dimensional — you define a real, explicit row and column
  structure up front, then place items into it directly

Neither is a strict upgrade over the other — they're genuinely suited to different real problems. Part 9's header (a simple row of two items) was correctly a Flexbox job; a real page-level layout with a header, sidebar, main content, and footer — genuine rows and columns at once — is exactly what Grid is built for.

The real homepage layout, in Grid

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

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

grid-template-columns: 240px 1fr defines two real columns — a fixed 240px sidebar, and a second column (1fr, one "fraction unit") that takes up all real remaining space. grid-template-areas is a genuinely readable way to define the real layout visually, in the CSS itself — each quoted string is one row, each word names a real area, and repeating a name across cells (like header spanning both columns) makes that element genuinely span multiple grid cells.

fr: the real unit unique to Grid

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
}

fr represents a real fraction of the available space in the grid container, after any fixed-size tracks (like the 240px sidebar above) are subtracted. Three equal 1fr columns split the real remaining space evenly — genuinely simpler than the older, real percentage-based math (33.333% with real, careful gap compensation) that equivalent layouts required before Grid existed.

repeat(): a real, genuine shorthand for repetitive tracks

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

repeat(3, 1fr) is functionally identical to writing 1fr 1fr 1fr — genuinely more concise, and it becomes a real, meaningful difference once combined with auto-fit or auto-fill, covered in part 12's real responsive grid.

grid-column and grid-row: real, direct placement

.featured-product {
  grid-column: 1 / 3;
  grid-row: 2;
}

Beyond named areas, items can be placed by real, explicit line numbers — grid-column: 1 / 3 spans from grid line 1 to grid line 3, covering two real columns. This is genuinely useful for a one-off placement (a single featured item spanning multiple columns) that doesn't warrant defining an entire named area just for it.

Next: CSS Grid deep dive — auto-fit, minmax(), and a genuinely responsive product grid that needs zero media queries to reflow.