Perhaps the most intuitive way to handle layout with CSS Grid is to use grid areas. Grid areas allows you to give layout names to HTML elements and then visually represent the layout within the code itself. Some have likened it to ASCII art, a situation where type itself forms an image, such as seen here. We'll see how that works with CSS Grid's areas later in this lesson.
We will create the layout below using grid areas. We've taken the liberty of drawing gray lines over the layout to show the number of columns and rows and their locations. Notice that this layout is using four columns and six rows.
Starting CSSThis is a four column grid container using grid-template-columns: repeat(4, 1fr). We have set the minimum height of each row to 80 pixels with grid-auto-rows: minmax(80px, auto). Notice we have used a max-width of 1200 pixels for the container with max-width: 1200px. This will keep it from going extremely wide on large screens.
Starting HTMLThere are six grid items, but notice that we are using HTML 5 semantic elements such as header, nav, aside, main, section, and footer instead of generic elements (DIV)s. We could have used DIVs, but it's better to use semantic elements wherever possible.
The result is what is shown below, an implicitly created grid with the six elements in a four column layout.
Now, we'll use grid areas to place the grid items onto the grid as we want them.
The result below is much like how ASCII art works. The code itself is a visual representation of the layout.
Below is how it looks in a browser.