Responsive layout patterns

Responsive layout patterns

Start with a layout that works on small screens, then add breakpoints when the content needs them. Use fluid widths, max-width, flexible images and CSS functions such as clamp. Test real content, not only empty boxes.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.