← CSS Styling
Responsive design and components · 15 MIN

Responsive navigation and cards

Responsive navigation and cards

A navigation bar may wrap or collapse at narrow widths; if you create a menu button, make its expanded state and keyboard behavior clear. Cards should use consistent spacing and flexible widths rather than fixed pixel dimensions.

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.

Code example

nav ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }