Teaching step

align-items: stretch is the default

EasyAlignmentF10

Three cards of different lengths used to line up perfectly. Someone added one line to stop an avatar being squashed, and every card in the app went ragged.

The three slats hold different amounts of content — 60px, 100px and 140px of it. They have to end up as a row of three equal columns, each filling the shelf's full height, without a height being written on any slat. Look at the base stylesheet before you start. There is already a line on .shelf that is standing in your way, and it is the single most common thing to find in a real codebase at this exact spot.

Hint

What is `align-items` set to right now, and what would it have been if nobody had touched it?

Live preview800×400

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="shelf"><div class="slat s1"><i class="fill"></i></div><div class="slat s2"><i class="fill"></i></div><div class="slat s3"><i class="fill"></i></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.shelf { width: 540px; height: 180px; background: #16161d; align-items: flex-start; }
.slat { width: 180px; background: #ffd166; }
.s2 { background: #7bdff2; }
.s3 { background: #b5e48c; }
.fill { display: block; }
.s1 .fill { height: 60px; }
.s2 .fill { height: 100px; }
.s3 .fill { height: 140px; }