Responsive cards with wrap and a basis
Make the preview wider and narrower: the number of cards per line changes on its own. The last line's cards grow to fill their line, so they can be wider than the others. Grid's auto-fill (Topic 8.2) keeps every column the same.
flex-wrap: wrap lets items break onto new lines instead of shrinking, gap puts fixed space between items and lines without touching the outer edges, and order changes only the visual position of an item, never its reading or Tab order.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a list of tags (<span class="tag">) wrap onto new lines with 8px between tags and 6px between lines.
Write CSS for a row of items that wraps, with 16px gaps, where each item is at least 200px and grows to fill the line.
A product card has <img> then <h2> in the HTML. Show the heading above the image visually. Is order a good idea here?
Explain it without notes
What is the difference between flex-wrap: nowrap and wrap when items don't fit?
Why is gap better than margins for spacing flex items?
What does order change, and what doesn't it change?
How can you make a responsive row of cards with Flexbox and no media queries, and what is its weakness?
Preview
Console
Nothing logged yet.