Episode 18 game · Kitsu · Fire
Kitsu’s Loom
Kai wove his scroll gallery with flex-wrap, and the last row keeps stretching. Feel the Crooked Weaver tangle each row on its own thread, weave the gallery with Grid and the cards with Flexbox, then prove on the loom that every row lines up.
Gallery: display: flex; flex-wrap: wrap
Every row should share the same column widths. Watch the last row.
1 · Feel the tangle
Kai’s gallery is display: flex; flex-wrap: wrap with .card { flex: 1 1 110px }. Add two more scrolls and look at the last row.
2 · Weave it right
Pick the CSS for each box: the gallery, one card, and the tags inside a card. Rows and columns together, or one line?
3 · The loom test
Your CSS, real layout, measured in this browser: five scrolls, then two, then a 360px phone screen.
New seal earned
The Weaver’s threads are cut
Acharya’s Rule #18Rows and columns together, use Grid. One line, use Flexbox. Nest them freely.
With flex-wrap each row is its own flex line, so a short last row grows to fill it. Nothing lines up across rows.
repeat(auto-fill, minmax(200px, 1fr)) makes as many equal columns as fit and keeps empty ones, so every row matches.
Grid places the cards; Flexbox stacks each card and wraps its tags. Add subgrid to line up titles across cards.