CSS Grid terminology

Property / Value	What it does
`grid-template-columns`	Defines the number and size of columns. Example: `1fr 2fr 1fr` creates 3 columns where the middle is twice as wide.
`grid-template-rows`	Defines the number and size of rows. Works the same way as columns.
`gap` (or `column-gap` / `row-gap`)	Space between grid cells. Does not add space on the outside edges.
`grid-column`	Placed on a grid item to control which columns it spans. Example: `1 / 3` spans from column line 1 to 3 (occupies 2 columns).
`grid-row`	Same as grid-column but for rows.
`fr` unit	Fractional unit: distributes remaining free space. `1fr 1fr` creates two equal columns regardless of container size.
`auto-fill`	Creates as many columns as fit, filling empty columns if there are fewer items.
`auto-fit`	Same as auto-fill but collapses empty tracks so items stretch to fill the row.

Common layout patterns

Holy grail: header, footer, left sidebar, content, right sidebar. Use grid-template-areas with named zones for clean readability.
Sidebar + content: grid-template-columns: 250px 1fr. Fixed sidebar, fluid content.
Responsive card grid: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). Cards wrap automatically at any viewport width without media queries.

fr vs. % vs. px

px: fixed size; does not adapt to the container. Good for sidebars with a known minimum width.
%: relative to the grid container, but does not account for gap. Adding 50% + 50% with a gap causes overflow.
fr: distributes the remaining space after fixed and percentage columns are placed. It handles gap automatically and is the preferred unit for fluid columns.

Grid vs. Flexbox

When to use Grid: Grid excels at two-dimensional layouts where you need precise control over both rows and columns simultaneously. Use it for page-level layouts (holy grail, dashboard grids, galleries) or any design where elements span multiple rows/columns.

When to use Flexbox: Flexbox is designed for one-dimensional layouts - a single row or a single column. Use it for navigation bars, card content alignment, centering, and any layout where items flow in a single direction. Flexbox is simpler when you don't need 2D positioning.

Can you combine them? Yes - and you should. A common pattern is Grid for the page structure (header, sidebar, content, footer) and Flexbox for the internal layout of each section.

Named grid areas

The grid-template-areas syntax lets you define semantic layout regions by name:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

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

This is far more readable than line-number positioning (grid-column: 1 / 4) and makes layout restructuring trivial - just rearrange the ASCII-art grid.

Subgrid

The subgrid value (CSS Grid Level 2, supported in Firefox 71+, Safari 16+, Chrome 117+) allows a nested grid to inherit the parent grid's track sizing. Before subgrid, child grids were independent and couldn't align with the parent's columns/rows. Example:

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* Inherits parent's 3 columns */
  grid-column: span 3;
}

This makes complex nested layouts (like card grids where each card's internal sections align across the entire page) significantly easier.