Layout and responsive
Flex, grid, responsive constraints, media queries, and wrapping.
What you will practice
Flexible rows; Wrapping navigation; Two-column grid; Repeatable card grid.
Use the worked examples when needed, then test your understanding without them.
- 01Layout and responsive: Flexible rowsA flex container lays out its direct children along a main axis; gap separates items.Practice
- 02Layout and responsive: Wrapping navigationAllow a navigation row to wrap rather than force links beyond a narrow viewport.Practice
- 03Layout and responsive: Two-column gridFractional grid tracks share available space. minmax(0,1fr) lets long content shrink within a track.Practice
- 04Layout and responsive: Repeatable card gridauto-fit repeats as many tracks as fit; the minimum controls when cards wrap.Practice
- 05Layout and responsive: Minmax tracksminmax defines a lower and upper track size; a zero minimum prevents intrinsic text width from forcing overflow.Practice
- 06Layout and responsive: Stable gapsUse gap for space between flex or grid items instead of manually adding margins to every child.Practice
- 07Layout and responsive: Intrinsic sizingA flexible image can use its natural ratio while fitting its container.Practice
- 08Layout and responsive: Content-width constraintsA width cap keeps long lines readable while inline padding protects small viewports.Practice
- 09Layout and responsive: Responsive imagesA percentage width responds to the containing block; automatic height preserves aspect ratio.Practice
- 10Layout and responsive: Mobile media queryA max-width media query applies at and below its boundary; the base layout should remain usable without it.Practice
- 11Layout and responsive: Desktop media queryA min-width query layers a wider arrangement on top of a simple mobile-first layout.Practice
- 12Layout and responsive: Source orderVisual reordering can differ from keyboard and reading order. Preserve meaningful source order instead.Practice
- 13Layout and responsive: Overflow preventionShrinkable tracks and wrapping text solve causes of overflow without hiding inaccessible content.Practice
- 14Layout and responsive: Responsive layout checkpointA robust layout combines intrinsic sizing, bounded tracks, and spacing that survives narrow widths.Practice