Grid Areas 2 exercises

Practice Using Grid Template Areas

In this exercise, we are tasked with creating the same layout as in the previous exercise, but this time, we will use grid-template-areas instead of line-based positioning.

Here's the starting point:


Loading exercise


0:00 Next up, we have another exercise. This one looks very similar to the previous one. I want you to take five boxes as you see here and turn them into this layout, the same layout that we previously created using line numbers. Instead of using the line numbers to position elements though, I'd like you to use grid-template-areas.

0:19 First of all, the HTML there's nothing for you to touch in there as always just the individual elements -- a header, nav, main, div, and footer. They each have a class -- header, nav, article, ads, and footer.

0:30 In the app.css I've defined the grid for us, the underlying columns and rows. You need to write the styles to define the grid-template-areas and assign each area to a specific element like the header, the nav, the article, the ads, and the footer.

0:48 I'd like the same exact layout but only using grid-template-areas, not using line-based positioning, not grid-row-start, grid-row-end, none of that stuff. Instead do grid-template-areas. You'll need to write styles for the container itself, the grid container, and for each individual element in the grid.

1:08 Give it a shot, and I'll be back with a solution.