Divide the Grid Into an Area Template

You can group cells of your grid together into an area and give the area a custom name. Do this by using grid-template-areas on the container like this:

grid-template-areas:
  'header header header'
  'advert content content'
  'advert footer footer';

The code above groups the cells of the grid into four areas: header, advert, content, and footer. Every word represents a cell and every pair of quotation marks represent a row.

Change the template so the footer area spans the entire bottom row. Defining the areas won't have any visual effect right now. Later, you will make an item use an area to see how it works.