New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →


Defines areas within a grid container. These areas can then be referenced when placing a grid item.

default grid-template-areas: none;

No area is defined.

grid-template-areas: "header header header" "sidebar main main";

You can use area names to specify which cells each grid item should occupy.