Layouts templates

4 templates

The layouts people rebuild on every project, written with modern CSS rather than the float and clearfix workarounds that are still all over the web. Most need no media queries at all.

Most of these used to be hard

The holy grail layout got its nickname because building it with floats took a wrapper div, negative margins and a clearfix. It is now nine lines of grid, and you can read the shape of the page directly out of the CSS. The sticky footer needed a hard-coded footer height that broke whenever anyone edited the footer; it is now three lines.

The templates here are written with current CSS rather than the workarounds that are still all over the web — which matters, because those workarounds are what most search results will hand you.

Stop writing breakpoints

Media queries respond to the viewport. Most layout problems are actually about the space a component has, which is not the same thing — a card in a sidebar and the same card at full width both need to reflow, and the viewport width tells you nothing about either.

repeat(auto-fit, minmax(240px, 1fr)) fits as many columns as will go and stretches them to fill the row. Six items, four items, one item: it adapts at every width with no breakpoints to maintain. Container queries take this further, responding to the component's own width, and support is now good across current browsers.

Other categories