CSS · Layout

grid-template-areas

Names grid regions so children can be placed by area.

cssRunnable example css course

Syntax

grid-template-areas: "a b"

Example

Try it

.demo { display: grid; grid-template-areas: "head side"; gap: 6px; } .demo > :first-child { grid-area: head; } .demo > :last-child { grid-area: side; }

Learn this in the course

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.

Open the course

grid-template-areas

Example

More in this group

Learn this in the course