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-col-start
,grid-col-end
, and grid-area
properties.
<div class="container"> <header>Welcome!</header> <nav>Links!</nav> <section class="info">Info!</section> <section class="services">Services!</section> <footer>Contact us!</footer> </div>
.container { display: grid; max-width: 900px; position: relative; margin: auto; grid-template-areas: "head head" "nav nav" "info services" "footer footer"; grid-template-rows: 300px 120px 800px 120px; grid-template-columns: 1fr 3fr; } header { grid-area: head; } nav { grid-area: nav; } .info { grid-area: info; } .services { grid-area: services; } footer { grid-area: footer; }
You may want to expand this section of the website to view the code above more clearly.
- In the example above, the HTML creates a web page with five distinct parts.
- The
grid-template-areas
declaration in the.container
rule set creates a 2-column, 4-row layout. - The
grid-template-rows
declaration specifies the height of each of the four rows from top to bottom: 300 pixels, 120 pixels, 800 pixels, and 120 pixels. - The
grid-template-columns
declaration uses thefr
value to cause the left column to use one fourth of the available space on the page and the right column to use three-fourths of the available space on the page. - In each rule set below
.container
, we use thegrid-area
property to tell that section to cover the portion of the page specified. Theheader
element spans the first row and both columns. Thenav
element spans the second row and both columns. The element with class.info
spans the third row and left column. The element with class.services
spans the third row and right column. Thefooter
element spans the bottom row and both columns. - That’s it! An entire page laid out in 40 lines of code.
This property is declared on grid containers.
You can see what you’ll be building in this exercise here.
Instructions
In style.css, add the grid-template-areas
property to the .container
rule set.
Its value should create a 2-column, 4-row layout with these areas:
- header (spans two columns in the first row)
- nav (spans two columns in the second row)
- left (spans one column on the left in the third row)
- right (spans one column on the right in the third row)
- footer (spans two columns in the fourth row)
In the header
rule set in style.css, set the grid-area
property to header
.
Follow the same pattern for the nav
, .left
, .right
, and footer
rule sets in style.css.
Use the grid-template-columns
property to make the first column 200 pixels wide and the second column 400 pixels wide.
In the .container
rule-set, use the grid-template-rows
property to make the rows 150 pixels, 200 pixels, 600 pixels, and 200 pixels tall.