Practical guide
Build from the smallest useful layout
The base CSS handles narrow viewports without a media query. Flexible widths and a fluid image prevent horizontal scrolling, while Grid and Flexbox manage alignment.
Three responsive building blocks
Fluid foundation
Relative widths and a centered maximum keep lines comfortable without fixing the page to one screen size.
Flexible layout
Grid creates page columns. Flexbox aligns smaller one-dimensional groups such as navigation and labels.
Responsive media
The image keeps its intrinsic ratio and never grows wider than its container.