Learn

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.

<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.

  1. In the example above, the HTML creates a web page with five distinct parts.
  2. In the .container ruleset, the grid-template-areas declaration creates a 2-column, 4-row layout.
  3. 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.
  4. The grid-template-columns declaration uses the fr 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.
  5. In each ruleset below .container, we use the grid-area property to tell that section to cover the portion of the page specified. The header element spans the first row and both columns. The nav 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. The footer element spans the bottom row and both columns.
  6. That’s it! An entire page laid out in 40 lines of code.

Instructions

1.

You can see what you’ll be building in this exercise here.

In style.css, add the grid-template-areas property to the .container ruleset.

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)
2.

In style.css, inside the header ruleset, set the grid-area property to have a value of header.

3.

Follow the same pattern for the nav, .left, .right, and footer rulesets in style.css.

4.

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.

5.

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

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?