DevTools Tips

Debug CSS grid areas

Categories: Supported by:

A really useful way to position elements on a CSS grid is using the grid-template-areas property. With it, you can give names to various areas of your grid (potentially spanning multiple cells), and then simply position your elements by referring to those names.

The syntax for the grid-template-areas property is a bit special though. It consists in a series of strings where each corresponds to one row in the grid. For example:

.container {
grid-template-areas: "header header"
"sidebar main "
"sidebar footer";
}

DevTools in Firefox, Chrome, and Edge make it very easy to debug potential problems that may occur when making mistakes with the above syntax.

Screenshot of Firefox, with a highlighted grid in the page showing the area names, and devtools below it with the "display area names" option checked