CSS grid-template-areas Builder

CSS Grid template-areas: visual layout in three lines of CSS

CSS Grid Layout became a W3C Recommendation in 2017 and is supported in every modern browser with over 96% global coverage. Among all of its features, grid-template-areas is the most expressive — it lets you sketch the layout of an entire page as ASCII art directly in CSS, with named cells that map one-to-one to the components inside the grid. A header, sidebar, main column and footer become four strings instead of a tangle of grid-column / grid-row declarations spread across the stylesheet.

The minimum boilerplate has three properties on the parent and one on each child:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  gap: 16px;
}
.layout > header { grid-area: header; }
.layout > aside  { grid-area: sidebar; }
.layout > main   { grid-area: main; }
.layout > footer { grid-area: footer; }

Syntax rules to remember

Each string is one row; each whitespace-separated token is one cell. Adjacent identical tokens merge into a single rectangle that spans those columns (or rows, if repeated across lines). A dot . represents an empty cell — useful for asymmetric layouts: ". sidebar main ." leaves the first and last columns empty. Areas must form rectangles; an L-shape throws a parse error and the rule is dropped.

Sizing tracks: fr, minmax, repeat

The fr unit represents a fraction of the available free space — 1fr 2fr divides the row into 1/3 and 2/3. minmax(200px, 1fr) sets a floor and ceiling. repeat(3, 1fr) shortens three identical tracks; repeat(auto-fill, minmax(200px, 1fr)) gives you a responsive card grid without a single media query. The gap property (renamed from grid-gap) handles spacing between cells.

Responsive layouts and the implicit grid

The killer feature is redefining grid-template-areas inside a @media query: a desktop layout with sidebar collapses on mobile by stacking every area into one column. Items placed outside the declared grid trigger the implicit grid; grid-auto-rows and grid-auto-columns size those extra tracks. Subgrid (Firefox 71+, Safari 16+, Chrome 117+) lets a nested grid inherit its parent's tracks — invaluable for aligning content across cards.

FAQ

Does Grid replace Flexbox? No, they are complementary. Grid is two-dimensional (rows and columns at the same time) and excels at page-level layout. Flexbox is one-dimensional and is better for components such as toolbars, button groups and form rows.

Is Grid performant? Yes. Modern engines (Blink, Gecko, WebKit) compute Grid in their layout pass with GPU-accelerated compositing for transforms; you will not feel a difference compared to Flexbox or floats for typical UIs.

Can I use Grid mobile-first? Absolutely. Define the single-column layout as the default and override grid-template-areas inside @media (min-width: 768px) for tablet and up.

What is the difference between named lines and named areas? Named lines ([start] 200px [end]) annotate column/row boundaries; named areas annotate rectangles of cells. Areas are easier to read; named lines are useful when you mix area placement with explicit line numbers.