Michael Thiessen

Grid Template Areas

Invalid Date

Sometimes complicated layouts are, well, complicated. But using grid-template-areas is here to help!

<section>

  <header>Page header</header>

  <nav>Nav bar</nav>

  <main>Content goes here!</main>

  <footer>Not for your feet</footer>

</section>

With this HTML, you'd first attach grid-area names to each element:

header { grid-area: header; }

nav { grid-area: nav; }

main { grid-area: main; }

footer { grid-area: footer; }

Now you can describe your layout:

section {

  /* ... some other CSS grid set up here */

  grid-template-areas: "header header"

                       "nav    main"

                       "footer footer";

}

And if you need a single column layout for mobile (with the nav at the bottom, just for fun):

section {

  grid-template-areas: "header"

                       "main"

                       "nav"

                       "footer";

}

It's pretty easy to see exactly how the page is laid out with grid-template-areas.

Related Articles