Skip to main content
← HTML and CSS

Lesson 6 of 7

Planet Grid

Flexbox lays things out in one direction. A grid lays them out in two. One tile takes up four squares.

What you will learn

  • display: grid
  • grid-template-columns
  • fr units
  • repeat() and auto-fit
  • minmax()
  • grid-column: span
  • aspect-ratio
  • Flexbox inside a grid

Before you start

Cards in a Row. You know that layout rules go on the parent box. A grid works the same way. It just does rows as well as columns.

What this page does

  1. It shows nine tiles in a grid.
  2. The first tile is twice as wide and twice as tall as the others. The rest fit around it.
  3. Make the window narrow. The grid drops to fewer columns on its own. You will write no code for that.

Grid in one sentence

Put display: grid on a box. Say what the columns are. The children fill those columns in order.

index.css
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

Every layout rule is on .grid, the parent. The nine tiles carry nothing. That is the same rule you learned with flexbox, and it is worth saying out loud again: the container decides the layout, and the children show up.

The value of grid-template-columns is the only new part. Read it from the inside out.

PieceWhat it means
200pxA column exactly 200 pixels wide
1frOne share of the space left over. Two columns of 1fr take half each
minmax(140px, 1fr)At least 140 pixels, and take a share of what is left
repeat(3, 1fr)Three equal columns, without typing it three times
repeat(auto-fit, ...)As many columns as fit. The browser counts, not you

The grid container

Both of these are lines in `.grid`. Move one and find the line that changed.

140px

Count the columns as you drag. You are not choosing how many. You are choosing how narrow one may get before the grid drops to fewer.

1rem

One number, and it spaces the columns and the rows.

One tile that takes up four

.featured {
    grid-column: span 2;
    grid-row: span 2;
}

span 2 means take up two columns, and two rows. This is the one place a grid item gets a rule of its own. Everything else is on the parent.

The other eight tiles move out of the way. You do not move one of them. That is the part worth stopping on: you said what one tile wants, and the grid worked out where everything else goes.

The big tile

Set both spans to 1 and watch every other tile move. Then set them back.

2
2

Set both to 1 and the big tile becomes an ordinary one. Every other tile moves. You did not move any of them.

#dbeafe

Grid and flexbox together

The big tile is four times the size of its words, so they would sit at the top with a lot of nothing under them. Three lines of flexbox centre them.

.featured {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

aspect-ratio: 1 / 1 on .tile is what makes every tile square whatever its width. Delete it and a tile with a long fact becomes taller than the rest.

Build it step by step

Get the tiles on the page first. Add the grid second. Make one tile big last.

  1. Make the page and one tile

    Start a new index.html with ! and Tab. Inside <body>, add a <div class="grid">. Put one <div class="tile"> inside it with an emoji, an <h2>, and a <p>.

  2. Copy the tile until you have nine

    Change the words each time. Reload. They stack down the page, one per line, because a div does nothing on its own.

  3. Turn on the grid

    Make index.css, link it, and give .grid two lines. Reload. Three columns appear.

    .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

  4. Add the gap

    The tiles are touching. Add gap: 1rem. One number spaces the columns and the rows.

  5. Let the browser count the columns

    Swap repeat(3, 1fr) for repeat(auto-fit, minmax(140px, 1fr)). Now drag the window narrow. The columns get fewer on their own. Try it with repeat(3, 1fr) again to see the difference.

  6. Make one tile big

    Add class="featured" to the first tile. Write the .featured rule with grid-column: span 2 and grid-row: span 2. Reload. Everything else moves for it.

  7. Centre the big tile's words

    Add the three flexbox lines to .featured. The words move to the middle of the tile.

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Start with repeat(3, 1fr), not with auto-fit. Three fixed columns is a picture a student can hold. Swap in auto-fit afterwards and drag the window. The before and after is the lesson.
  • Ask them to predict what span 2 will do to the tile BELOW the big one before you reload. Most say it will be pushed off the grid. Watching it move sideways instead is the moment grid becomes different from flexbox.
  • Say the parent and child rule again. They met it in Cards in a Row. Hearing that the same idea covers a second layout system is worth more than either system on its own.
  • Do not teach named grid areas or line numbers. span covers everything a student needs this year and it reads in plain English.
  • The flexbox inside the big tile is worth one minute. Students expect to have to choose between grid and flexbox. Showing one box being both settles it.