Fluid Layouts Cheatsheet

Fixed pixel widths look correct on one screen and increasingly wrong on every other; fluid layouts size things proportionally so they adapt on their own. This cheatsheet gathers the whole toolkit on one page, from the centred container and its guard rails to fluid grids, images, rem typography, viewport units, and the border-box fix, each snippet annotated line by line. Keep it open while you build, or save the image and pin it nearby.

For the full background, read the guide to building layouts that flex with the screen. To practise, work through the 10 code-along examples.

Hope this helps,