CSS Grid Template Areas Guide
Use named grid areas to create semantic, readable CSS layouts — with practical page layout examples.
Published:
Tags: CSS grid template areas, CSS named grid areas, grid-template-areas layout
CSS Grid Template Areas Guide transforms CSS Grid from a coordinate-based system into a named, visual layout description. Instead of tracking row and column line numbers, you write a literal map of your layout using area names. The result is CSS that reads like a wireframe — making complex page layouts both easy to write and easy to maintain. --- What is The Basic Syntax? Each quoted string is one row. Each word inside is one cell. Repeat a name across multiple cells to span them. Use for empty cells. Then assign children to areas with : No line numbers. The visual ASCII grid in the CSS matches the visual result on screen. What is Classic Page Shell Layout? The most common use case: header, sidebar, main content, and footer: What is Holy Grail Layout? The classic "holy grail" layout:…
Frequently Asked Questions
What are CSS grid template areas?
`grid-template-areas` is a CSS property that lets you define a grid layout using named regions instead of numeric line numbers. You write a visual ASCII map of the layout using quoted strings — each cell gets a name, and child elements are assigned to those names with `grid-area`. It makes complex layouts readable and easy to restructure.
How do I name grid areas in CSS?
Define area names in the parent with `grid-template-areas: 'header header' 'sidebar main'`. Then assign a child to an area with `grid-area: header` (no quotes). Area names must be valid CSS identifiers (no spaces, no hyphens as standalone). A `.` in the area string creates an empty cell.
How do I create a full-page layout with grid areas?
Define a container with `grid-template-rows`, `grid-template-columns`, and `grid-template-areas` mapping header/nav/main/sidebar/footer. Set `min-height: 100vh` on the container. Assign each child element `grid-area` matching the area name. This creates a classic page shell in under 20 lines of CSS.
What is the grid-area property?
`grid-area` on a grid item can either assign it to a named area (one value: `grid-area: sidebar`) or specify explicit placement using four slash-separated line numbers: `grid-area: 2 / 1 / 3 / 3` (row-start / column-start / row-end / column-end). The named form is simpler and more readable for template-areas layouts.
How do I create a sidebar layout with grid areas?
Define `grid-template-columns: 240px 1fr` and `grid-template-areas: 'sidebar main'`. Assign `.sidebar { grid-area: sidebar; }` and `.main { grid-area: main; }`. For responsive behavior, change the template-areas in a media query: `grid-template-areas: 'main' 'sidebar'; grid-template-columns: 1fr;`.
All articles · theproductguy.in