A fluid layout uses containers that grow and shrink with the viewport instead of fixed dimensions. This keeps the page within the available screen and avoids horizontal scrolling on smaller devices. section 7.3
Build fluid layouts by applying these principles:
- Leave the main container without an explicit width, or define its width as a percentage; use padding or auto margins for breathing room. section 7.3
- Define columns with percentages, such as a 70% main column and a 30% sidebar, so they continue to fit at different viewport widths. section 7.3
- Use flexbox when its items can grow and, especially, shrink enough to fit the available width. section 7.3
- Preserve the browser’s responsive starting point: block elements fit the viewport and inline content wraps before added styles introduce overflow. section 7.3
A fluid page with responsive images
A page can divide its content into a 70% main column and a 30% sidebar, then prevent images from exceeding their container with `img { max-inline-size: 100%; }`. A responsive `srcset` can provide small, medium, and large image files for different display conditions. section 7.3 section 7.4.2
Listing 7.15 Responsive srcset image
<img alt="A white coffee mug on a bed of coffee beans"
src="coffee-beans-small.jpg" #1
srcset="coffee-beans-small.jpg 560w, #2
coffee-beans-medium.jpg 800w, #2
coffee-beans.jpg 1280w" #2
/>
Compare image candidates in a `srcset` and let the browser select an appropriate resolution while the image remains constrained by its container. section 7.4.2
