Fit any width

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 Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can use flex-wrap: wrap so a row drops items onto new lines.
• I can use flex: 1 and min-width so items share the room and do not get squashed.
• I can explain why a fixed width does not fit every screen.

Timing

Predict and Run 10 min · Investigate 12 min · Mix it up 3 min · Modify 7 min · Make 8 min

Before class

Do the Make task yourself in the playground (about 5 minutes).

A flex row keeps all its items in one line unless it is told it may wrap. flex-wrap: wrap on the row allows new lines. flex: 1 on the items makes them share the spare room on their line. min-width is the narrowest an item may be: once a line cannot fit another item at that width, the item drops to the next line. Together they make a layout that fits a phone and a laptop with no separate versions.

The preview pane is narrow, so students do not need to resize the browser. They change the number of cards or the min-width and see the same effect a screen of a different width would give.

Running the lesson

1. Predict and Run: most students expect the cards to drop down by themselves. They run off the right edge instead. Add the wrap line, then change min-width to see the number per line change.
2. Investigate: the 450px question is arithmetic with the gap. Ask students to work it out before choosing. The fixed-width question separates 'looks right on my laptop' from 'is right everywhere'.
3. Mix it up: the cards touch each other. The fix is the same one as last lesson, on the row.
4. Modify and Make: if a gallery squashes, ask what the smallest card should be.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

• Fit or fall off (predict, 3 min)

  With your partner, say what the preview does with six cards that cannot all fit. Hold up 1, 2, 3 or 4 fingers for the option you chose.

  Take a vote before running. Ask someone who chose the first option what tells the row it may start a new line. The idea to land: it has to be allowed.

• Squeeze the line (end, 5 min)

  On a strip of paper, draw a line 450px wide at a scale of your choice. Cut out six cards at 140px and fit as many as you can with 12px gaps. Then try 220px cards.

  Check that students count gaps as well as cards. Ask what changes on a phone-width strip.

The hard part (on purpose)

Believing the browser moves items down by itself. Ask what the row has been told about wrapping before saying.

When students get stuck

Answers to the checks

1. Predict: Six cards, each at least 140px wide, sit in a row inside the narrow preview. What happens?
   The cards stay in one line and run off the right edge. A flex row keeps its items in one line unless you allow wrapping, and min-width stops the cards shrinking below 140px.
2. Match the lines: Match each line with what it does.
   flex-wrap: wrap → D. a full line sends the next item to a new line; flex: 1 → A. each item grows to share the spare room on its line; min-width: 140px → C. the narrowest an item may be before it wraps; gap: 12px → B. space between items, across and down
   Wrap decides when a new line starts, min-width decides how narrow an item may get before that happens, and flex: 1 fills the room that is left.
3. How many fit: A line of the gallery is 450px wide, each card has min-width: 140px, and the gap is 12px. How many cards fit on one line?
   3 cards
   Three cards need 3 x 140 + 2 x 12 = 444px, which fits in 450px. Four would need 4 x 140 + 3 x 12 = 596px. On a wider screen, more fit on a line, with the same CSS.
4. A fixed width: Three cards have width: 400px with a 20px gap, and look right on a 1300px laptop. What is true on a 360px phone?
   400px is the same on every screen, so three cards need about 1240px: far more than a phone has
   A fixed width is the same on every screen. Looking right on one screen tells you nothing about another. A min-width with flex: 1 lets the row fit three cards on a laptop and one on a phone.
5. The wrap in the wrong place: The cards should wrap onto new lines, but they stay in one line, and there is no error. Click the line that causes it.
   line 7
   Line 7 puts flex-wrap on each card. Wrapping is a job for the box that holds the items: .gallery { flex-wrap: wrap; }.
6. Mix it up: The cards wrap into lines, but they touch each other, across and down. Which change adds space between all of them?
   Add gap: 12px; to the .gallery rule
   gap goes on the row and spaces the items along each line and between the lines. justify-content moves a group of items, but flex: 1 has already filled every line, and align-items works across a line. gap on an item does nothing.

Solutions

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

Modify › Stop the squash

<style>
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .item {
    flex: 1;
    min-width: 120px;
    border: 2px solid teal;
    padding: 8px;
  }
</style>
<div class="gallery">
  <div class="item">Robot building on Tuesdays</div>
  <div class="item">Coding games at lunch</div>
  <div class="item">Drone flying on the oval</div>
  <div class="item">Design a logo this term</div>
  <div class="item">Music for the robots</div>
  <div class="item">Chess for the clever</div>
</div>

Modify › Fewer per line

<style>
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .item {
    flex: 1;
    min-width: 180px;
    border: 2px solid teal;
    padding: 8px;
  }
</style>
<div class="gallery">
  <div class="item">Robot building on Tuesdays</div>
  <div class="item">Coding games at lunch</div>
  <div class="item">Drone flying on the oval</div>
  <div class="item">Design a logo this term</div>
  <div class="item">Music for the robots</div>
  <div class="item">Chess for the clever</div>
</div>

Make

<style>
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .item {
    flex: 1;
    min-width: 120px;
    border: 1px solid gray;
    padding: 6px;
  }
</style>
<h1>Our club's year</h1>
<div class="gallery">
  <div class="item"><img src="trophy.svg" alt="Trophy" width="80"><p>Trophy</p></div>
  <div class="item"><img src="medal.svg" alt="Medal" width="80"><p>Medal</p></div>
  <div class="item"><img src="book.svg" alt="Book" width="80"><p>Book</p></div>
  <div class="item"><img src="ball.svg" alt="Ball" width="80"><p>Ball</p></div>
  <div class="item"><img src="star.svg" alt="Star" width="80"><p>Star</p></div>
  <div class="item"><img src="music.svg" alt="Music" width="80"><p>Music</p></div>
</div>

Stretch and support

Stretch: Give the gallery a width of 300px, then 600px, and write down how many cards fit on a line each time. Explain the numbers with min-width and gap.

Support: Give students the Run page and ask them only to add the wrap line and to change the number of cards. Tell them what each change does to the cards on a line.

Exit ticket

A gallery uses flex: 1 and min-width: 150px. Why does it show four cards on a line on a laptop but one on a phone?

A line holds as many 150px cards as fit, and flex: 1 stretches them to fill it. A phone only has room for one, so the others wrap.

What each step is for

• Predict: Students expect items to move down by themselves when a row is full; without flex-wrap they stay in one line.
• Run: flex-wrap: wrap moves items to a new line when the row is full, flex: 1 shares the space on each line, and min-width sets how narrow an item may get.
• Investigate: A fixed width is the same on every screen. A wrapping row with flex: 1 and a min-width changes how many items fit on a line.
• Modify: A min-width keeps wrapped cards from being squashed, and a bigger min-width puts fewer cards on each line.
• Mix it up: The wrapped cards need the space between them set on the row with gap, the same as a row that does not wrap.

Where it leads

Next lesson uses a wrapping row for a hero and a row of cards, and shows that one rule can style any number of copies. Class idea: open a school website and drag the window narrower; ask which parts wrap.