Fluid and Container-Based Layouts
Go beyond fixed breakpoints: do math in CSS with calc(), min() and max(), make type and spacing grow smoothly with clamp(), and build components that adapt to the space they are given with container queries.
Updated
Fluid Sizes
- calc(), min() and max(): Math in CSS (Journeyman): calc() does arithmetic with sizes, even mixing units such as 100% and 2rem, and min() and max() pick the smaller or the larger of two sizes, so a box fits a phone and a wide screen with no media query at all.
- Fluid Type and Spacing with clamp() (Journeyman): clamp() keeps a size between a minimum and a maximum and lets it grow smoothly in between, so headings and spacing fit a phone and a wide screen without a single breakpoint, while still following the reader's zoom.
Container Queries
- Container Queries: Components That Fit Their Space (Freelancer): A container query changes a component's style by the width of the box it sits in instead of the width of the screen, so one product card can be stacked in a narrow sidebar and side by side in a wide spot on the same page.
Exercise: Bike Cards That Fit Anywhere
- Exercise: Bike Cards That Fit Anywhere (Journeyman): Make one Spoke & Chain bike card fit three kinds of spots, a wide feature, a catalog column and a narrow sidebar, with named containers, @container rules and a fluid title, and let the tests check each part.