Flexbox, Grid and responsive layout

Most layouts need two tools. Flexbox lines items up in one direction, a row or a column. It suits nav bars, toolbars and centring things.

Grid handles rows and columns at the same time. It suits whole page layouts and galleries of cards. For example, repeat(auto-fill, minmax(220px, 1fr)) gives a grid that adapts to any screen with no media queries at all.

Build mobile first. Write the narrow phone layout as the default. Then add min-width media queries (rules that apply from a certain screen width) as the screen grows. Include the viewport meta tag, or phones will show a tiny zoomed-out desktop page.