Make space
for great layouts.
A hands-on CSS studio. Move the controls, see real browser layout, and discover why every element lands where it does.
16 lessons · 8 challenges · Your own exportable designA small change. A new arrangement.
Real CSS • rendered by your browserYour live canvas
The viewport can scroll horizontally when wider than your screen. Cards use a 140px flex basis with shrinking disabled, so wrapping is easy to observe.
Show a hint
Learn the rules. Then bend them.
From playground to your next project.
Keep what you made
Download an HTML page with your current layout, its CSS, and the cards. Open it directly in a browser or edit it in your code editor.
The page uses width: 100% with your chosen width as a maximum. Flex layouts may overflow on narrow screens if wrapping is off. Test the result at more than one width.
Your next project
Turn the cards into a course directory: add meaningful headings, descriptions and links. Try automatic Grid columns, then test a long title and a narrow screen. Preserve a logical source order.
A practical layout review
- Resize the window: is anything clipped or hard to read?
- Use realistic long text, not just short placeholders.
- Check keyboard focus, link purpose and reading order.
- Compare a single-column view with the wide version.
- Use spacing consistently, then test with browser zoom.
Read the references
MDN Flexbox guide ↗MDN Grid guide ↗
Progress and designs are saved locally in this browser. Use a backup file to move them between devices.