Page layout with Grid

An optional lesson. Students use CSS Grid to lay out a page in columns (a menu and the main content) and a gallery in rows and columns, and choose between Grid and Flexbox.

Layout and components · Final challenge: lay out the club page · about 50 minutes · Open the student lesson

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

Slides Download Present from the browser, or export to PowerPoint or PDF.
Worksheet Download Print the student copy; the Teacher edition has the answers.

Students will be able to

I can lay out a page in columns with display grid and grid-template-columns.
I can explain what 1fr means: one share of the space left over.
I can make a gallery whose rows line up, with repeat and gap.
I can choose between Grid and Flexbox for a layout.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 10 min · Make 10 min · Gallery 5 min

Before class

This lesson is optional. It builds on Flexbox (lesson 7): Grid also goes on the parent, but it lines items up in columns and rows. Only three ideas are new: display: grid;, grid-template-columns (a list of widths, such as 150px 1fr) and repeat(3, 1fr) for equal columns. gap is the same as in Flexbox.

fr means one share of the space that is left after fixed widths. 1fr 2fr gives the second column twice the first. Items fill the columns in order and start a new row when a row is full. Do the Make task yourself first.

Running the lesson

Predict: many students expect main to stay under the menu. Run, then try 250px, 1fr 1fr and 1fr 2fr.
Investigate: count rows on the board for 7 pictures in 3 columns (3 + 3 + 1).
Columns that will not form: the same mistake as Flexbox on the items. Grid goes on the box that holds them.
Grid or Flexbox: one direction (a menu) is Flexbox; columns and rows that line up (a page, a gallery) is Grid. Many pages use both.
Modify: the page first, then the cards inside main: a grid inside a grid.
Gallery: compare with a Flexbox gallery that wraps; with Grid every row lines up, even the last one.

The hard part (on purpose)

Reading grid-template-columns and what 1fr means. Ask them to predict each column's width before looking, then check with the page.

When students get stuck

What you will see	A question to ask	The fix
The menu and the main content still stack.	Which rule has display grid? Is it on the box that holds them?	Put display grid and grid-template-columns in the .page rule, not on nav or main.
Everything is in one column even with display grid.	Did you list the columns with grid-template-columns?	Add grid-template-columns, for example 160px 1fr or repeat(3, 1fr).
The columns are the wrong widths.	How many widths are listed, and which ones are fixed?	List one width per column; use fr for columns that share the space left over.

Answers to the checks

Predict: Where does the main content go?
To the right of the menu, filling the rest of the width. The first column is 150px; 1fr means one share of the space left over.
Match the parts: Match each part with what it does.
display: grid → B. arranges the box's children in columns and rows; grid-template-columns: 150px 1fr → E. two columns: 150 pixels, then the rest; 1fr → C. one share of the space left over; repeat(3, 1fr) → A. three equal columns; gap: 16px → D. space between the columns and rows
Grid goes on the box that holds the items. The items fill the columns in order, starting a new row when a row is full.
Count the rows: This gallery has three columns and seven pictures. How many rows does it fill?
3
Three per row: 3 + 3 + 1. The seventh picture starts a third row, in the first column.
Columns that will not form: The menu and the main content should be two columns, but they stack, with no error. Click the line that causes it.
line 2
Line 2 gives the grid to the nav and the main themselves. Grid, like Flexbox, goes on the box that holds them: .page { display: grid; ... }.
Grid or Flexbox?: When is Grid a better choice than Flexbox?
When items must line up in columns and rows, such as a page layout or a gallery
Flexbox is for one direction (a menu, a toolbar). Grid is for two (rows and columns that line up). Many pages use both: Grid for the page, Flexbox inside each part.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Two columns

<style>
  nav {
    background-color: lightblue;
    padding: 8px;
  }
  .card {
    padding: 12px;
    border: 2px solid teal;
  }
  .page {
    display: grid;
    grid-template-columns: 160px 1fr;
  }
</style>
<header>
  <h1>Chess club</h1>
</header>
<div class="page">
  <nav>
    <p><a href="https://example.com/home">Home</a></p>
    <p><a href="https://example.com/join">Join</a></p>
  </nav>
  <main>
    <h2>Groups</h2>
    <div class="cards">
    <div class="card">Beginners</div>
    <div class="card">Players</div>
    <div class="card">Champions</div>
    <div class="card">Coaches</div>
    <div class="card">Parents</div>
    <div class="card">Visitors</div>
    </div>
  </main>
</div>

Modify › Some space

<style>
  nav {
    background-color: lightblue;
    padding: 8px;
  }
  .card {
    padding: 12px;
    border: 2px solid teal;
  }
  .page {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
  }
</style>
<header>
  <h1>Chess club</h1>
</header>
<div class="page">
  <nav>
    <p><a href="https://example.com/home">Home</a></p>
    <p><a href="https://example.com/join">Join</a></p>
  </nav>
  <main>
    <h2>Groups</h2>
    <div class="cards">
    <div class="card">Beginners</div>
    <div class="card">Players</div>
    <div class="card">Champions</div>
    <div class="card">Coaches</div>
    <div class="card">Parents</div>
    <div class="card">Visitors</div>
    </div>
  </main>
</div>

Modify › Cards in three columns

<style>
  nav {
    background-color: lightblue;
    padding: 8px;
  }
  .card {
    padding: 12px;
    border: 2px solid teal;
  }
  .page {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
</style>
<header>
  <h1>Chess club</h1>
</header>
<div class="page">
  <nav>
    <p><a href="https://example.com/home">Home</a></p>
    <p><a href="https://example.com/join">Join</a></p>
  </nav>
  <main>
    <h2>Groups</h2>
    <div class="cards">
    <div class="card">Beginners</div>
    <div class="card">Players</div>
    <div class="card">Champions</div>
    <div class="card">Coaches</div>
    <div class="card">Parents</div>
    <div class="card">Visitors</div>
    </div>
  </main>
</div>

Make

<style>
  .page {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 20px;
  }
  main {
    background-color: lavender;
    padding: 12px;
  }
  .side {
    background-color: lightyellow;
    padding: 12px;
  }
</style>
<div class="page">
  <main>
    <h1>Music night</h1>
    <p>Friday at 7 pm in the hall. Bands, choirs and solo acts.</p>
  </main>
  <div class="side">
    <h2>Tickets</h2>
    <p>Free, from the office.</p>
  </div>
</div>

Lay out the photo gallery

<style>
  .photo {
    padding: 8px;
    border: 1px solid gray;
    text-align: center;
  }
  .photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 420px;
  }
</style>
<h1>Our year in pictures</h1>
<div class="photos">
  <div class="photo"><img src="ball.svg" alt="Soccer final" width="70"><p>Soccer final</p></div>
  <div class="photo"><img src="music.svg" alt="Music night" width="70"><p>Music night</p></div>
  <div class="photo"><img src="book.svg" alt="Book week" width="70"><p>Book week</p></div>
  <div class="photo"><img src="star.svg" alt="Awards" width="70"><p>Awards</p></div>
  <div class="photo"><img src="trophy.svg" alt="Trophy day" width="70"><p>Trophy day</p></div>
  <div class="photo"><img src="medal.svg" alt="Sports day" width="70"><p>Sports day</p></div>
</div>

Stretch and support

Stretch: Make one card span two columns with grid-column: span 2; or change the gallery to repeat(auto-fill, minmax(120px, 1fr)) so the number of columns follows the width.

Support: Do the first Modify task together. Keep the hint open for the cards: it is the same as the page rule with repeat(3, 1fr).

Exit ticket

Write the rule for a gallery box with four equal columns and a gap, and say why it goes on the gallery, not on each picture.

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } It goes on the box that holds the pictures, because Grid arranges that box's children.

What each step is for

Predict: Students meet 1fr for the first time; predicting where main goes, and how wide, makes the column list concrete.
Run: grid-template-columns lists each column's width; fr shares out the space that is left.
Investigate: Grid goes on the parent like Flexbox; its columns are listed, and items fill them in order, row after row.
Modify: Laying out a real page with Grid: two columns for the page, then three for the cards.
Lay out the photo gallery: A real gallery where every row lines up: the job Grid does better than Flexbox.

Where it leads

Back in the club page, students can use Grid for the cards or the whole page. The DOM course and later web projects use both Grid (for page layout) and Flexbox (inside each part).