Define a Page Layout with CSS Grid Using grid-template-areas

So far we've learned quite a bit about how to set columns and rows evenly in our CSS Grid. For page layouts, the sections are a little more varied than evenly spaced grids.

Most websites have a header, content, and footer section. The header and footer typically span the width of the page while the content can vary.

We will use grid-template-areas to map our various sections to our CSS Grid. We will debug some common errors that you will encounter when working with grid areas.