Grid Template Areas

[oldoc63]

• The grid-template-areas property allows you to name sections of your web page to use as values in the grid-row-start, grid-row-end, grid-column-start,grid-column-end, and grid-area properties.
• This property is declared on grid containers.

[oldoc63]

• Inside the header ruleset, set the grid-area property to have a value of header.
• Follow the same pattern for the nav, .left, .right, and footer rulesets in style.css.

[oldoc63]

• In the .container ruleset, use the grid-template-columns property to make the first column 200 pixels wide and the second column 400 pixels wide.

[oldoc63]

• In the .container ruleset, use the grid-template-rows property to make the rows 150 pixels, 200 pixels, 600 pixels, and 200 pixels tall.