Page layout with Grid

Arrange a page and a gallery in rows and columns with CSS Grid, and choose between Grid and Flexbox.

News sites, shops and photo galleries line everything up in columns and rows: that is CSS Grid.

Flexbox lines items up in one row. Grid lines them up in columns and rows at once, which suits whole page layouts and galleries.

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

page.html

<style>
  .page {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
  }
  nav {
    background-color: lightblue;
  }
  main {
    background-color: lightyellow;
  }
</style>
<div class="page">
  <nav>Menu</nav>
  <main>The main content of the page.</main>
</div>

display: grid and grid-template-columns are new. Read the code. Where does the main content go?

Where does the main content go?To the right of the menu, filling the rest of the widthUnder the menu, as beforeSide by side, both 150 pixels wideOn top of the menu

RunRun it and compare the result with your prediction.

Run

Compare with your prediction. Change 150px to 250px. Then try 1fr 1fr (two equal columns) and 1fr 2fr (the second twice as wide).

page.html

<style>
  .page {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
  }
  nav {
    background-color: lightblue;
  }
  main {
    background-color: lightyellow;
  }
</style>
<div class="page">
  <nav>Menu</nav>
  <main>The main content of the page.</main>
</div>

Try it yourselfYour edits are saved in this browser.

I can say what 150px 1fr means.

InvestigateTrace how each line of code connects to what you see.

Investigate

page.html

<style>
  .page {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
  }
  nav {
    background-color: lightblue;
  }
  main {
    background-color: lightyellow;
  }
</style>
<div class="page">
  <nav>Menu</nav>
  <main>The main content of the page.</main>
</div>

What does each part do?

Seven pictures in three columns.

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 240px;
  }
</style>

The page this code makes — What this code makes

Two columns that stack instead.

Two tools, two jobs.

Match each part with what it does.

display: grid

grid-template-columns: 150px 1fr

1fr

repeat(3, 1fr)

gap: 16px

This gallery has three columns and seven pictures. How many rows does it fill?

The menu and the main content should be two columns, but they stack, with no error. Click the line that causes it.

When is Grid a better choice than Flexbox?Never: they do the same thingOnly for tablesFor a single row, such as a menuWhen items must line up in columns and rows, such as a page layout or a gallery

ModifyChange the code on purpose and check the result.

Modify

Put the menu on the left (160px) and the main content on the right.

Need a hint?

Grid goes on the parent too. Which box holds the nav and the main?

Another hint

The .page box holds the nav and the main: give it display: grid;.

Another hint

Then grid-template-columns: 160px 1fr;

Show the expected result

What the finished page looks like — What it should look like. Your words can be different.

Put a gap between the two columns.

Need a hint?

gap: 16px; in the .page rule.

Show the expected result

Lay the six cards out in three equal columns, with a gap.

Need a hint?

The cards' parent becomes the grid, and the columns rule says how many columns and how wide.

Another hint

A .cards rule: display: grid;, grid-template-columns: repeat(3, 1fr); and a gap.

Show the expected result

Try it yourselfYour edits are saved in this browser.

Make the menu and the main content two columns.

This ticks when your page has all of the above.

Put space between the columns.

This ticks when your page has all of the above.

Lay the six cards out in three columns.

This ticks when your page has all of the above.

MakeBuild something new using what you have learned. Expect a few tries; that is normal.

Make

Make a page for an event with two columns: the main information, and a side box (tickets, times or a map). Choose the column widths: a fixed width and 1fr, or two shares such as 2fr 1fr.

Try it yourselfYour edits are saved in this browser.

Need a hint?

Plan the parts first: one parent box holding two or more parts, then a rule that makes the parent a grid.

Another hint

A <div class="page"> holding two parts, such as a <main> and a side box.

Another hint

A .page rule with display: grid;, grid-template-columns and a gap.

Show the expected result

Make a page layout with Grid: at least two columns.

This ticks when your page has all of the above.

ModifyChange the code on purpose and check the result.

Lay out the photo gallery

These six photos stack one under another. Lay them out in three equal columns with a gap, 420px wide, so every row lines up.

Try it yourselfYour edits are saved in this browser.

Show the expected result

For teachers

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. About 50 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

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.

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

The menu and the main content still stack. Ask: Which rule has display grid? Is it on the box that holds them? Fix: 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. Ask: Did you list the columns with grid-template-columns? Fix: Add grid-template-columns, for example 160px 1fr or repeat(3, 1fr).
The columns are the wrong widths. Ask: How many widths are listed, and which ones are fixed? Fix: List one width per column; use fr for columns that share the space left over.

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

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

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.

Now you can

Lay out a page in columns with display grid and grid-template-columns.
Explain what 1fr means: one share of the space left over.
Make a gallery whose rows line up, with repeat and gap.
Choose between Grid and Flexbox for a layout.

Next lesson12. Make it reactAdd a few lines of JavaScript, as a recipe, so a button changes the page and a form greets people by name.

Source: content/code/css/grid/lesson.md