Learn
Advanced CSS Grid
Grid Template Areas

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.

  1. In the example above, the HTML creates a web page with five distinct parts.
  2. The grid-template-areas declaration in the .container rule set 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 rule set 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.

This property is declared on grid containers.

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

Instructions

1.

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

In the header rule set in style.css, set the grid-area property to header.

3.

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

4.

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 rule-set, use the grid-template-rows property to make the rows 150 pixels, 200 pixels, 600 pixels, and 200 pixels tall.

Folder Icon

Take this course for free

Already have an account?