Detailed explanation
The CSS grid-template-areas property defines named regions inside a grid container using a visual, text-based map. Each quoted string represents one row, and each space-separated token represents one cell. Repeating a name across adjacent cells makes that region span multiple columns or rows. This is useful for page sections such as headers, sidebars, main content, and footers because the CSS resembles the intended layout rather than relying entirely on numerical grid-line references. It mainly describes placement, not track sizing.
For example, .layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 220px 1fr; gap: 16px; } creates a two-column layout with full-width header and footer regions. Assign direct children using .header { grid-area: header; }, .sidebar { grid-area: sidebar; }, .main { grid-area: main; }, and .footer { grid-area: footer; }. The browser resolves these names into grid boundaries and places each assigned item within its corresponding region. Defining an area does not create an HTML element or automatically match an element’s class name.
Every row string must contain the same number of cells, and every named area must form a single filled rectangle. An L-shaped area or disconnected occurrences of the same name make the declaration invalid. A dot represents an unnamed cell; it is not a reserved spacer, and auto-placed items may occupy it. Use grid-template-columns and grid-template-rows separately to control track sizes. Multiple items can target the same named area, so area assignment does not guarantee that items will never overlap.
Named areas are especially valuable for responsive layouts. A media query can replace the desktop map with "header" "main" "sidebar" "footer" and change the columns to 1fr without changing each item’s grid-area assignment. However, visual rearrangement does not change DOM order or normally change keyboard navigation and screen-reader reading order, so the HTML must remain logical. Interviewers usually look for a clear distinction between defining areas on the container, assigning items to them, and sizing tracks, along with awareness of rectangular-area rules and accessibility.
Key points to remember
- grid-template-areas defines a visual map of named regions on a grid container.
- Assign grid items to those regions using grid-area with the matching name.
- Each row must have equal cell counts, and each named area must be rectangular.
- Use dots for unnamed cells and separate track-sizing properties for dimensions.
- Redefine the map in media queries while preserving a logical DOM order.
Common mistakes candidates make
- Assuming an area name automatically selects a matching HTML class or creates an element.
- Writing unequal row lengths or nonrectangular named areas, invalidating the declaration.
- Treating visual rearrangement as a change to reading order or keyboard navigation order.
Likely follow-up questions
How is grid-template-areas different from grid-template-columns?
grid-template-areas names regions and describes their arrangement, while grid-template-columns defines column tracks and their sizes. They work together: an area map can describe two columns, and 220px 1fr can size them.
Can two elements use the same named grid area?
Yes, multiple grid items can have the same grid-area value and occupy the same region. They may overlap, with painting order and properties such as z-index controlling which appears on top.
When should you prefer named areas over grid-line numbers?
Prefer named areas for recognisable layout sections whose arrangement benefits from a readable visual map. Line-based placement is often more convenient for repeated items, programmatic spans, or layouts that are awkward to express as named rectangles.
Interview tip: Explain the container map and item assignment first, then use a header–sidebar–main example to demonstrate spanning and responsive rearrangement.