Stack columns with grid and media queries
CSS grid with media queries is the other route to reflow. Declare a single-column grid as the base, then add columns as the space appears, so narrow viewports get the stacked layout without anything having to be undone. W3C lists C32 as sufficient for 1.4.10 Reflow and states the same two targets as its flexbox sibling. No horizontal scrollbar at a width equivalent to 320 CSS pixels for vertically scrolling content, and no vertical scrollbar at 256 CSS pixels of height for horizontally scrolling content. Setting breakpoints in em rather than pixels makes the layout respond to text size as well as to window width, which matters because zoomed text is exactly the condition this rule exists for. And the same caution as flexbox applies. Grid can place items anywhere, so the reading order has to keep meaning what it meant.
How we find it in an audit
The check is the same everywhere in this family. Set 320 CSS pixels or zoom to 400 percent and look for a horizontal scrollbar. Fixed-width grid tracks are the usual cause and they are easy to inventory, so the code review and the browser test between them find nearly everything.
How affected users experience it
A three-column grid with fixed tracks at 400 percent zoom shows a fraction of the middle column and hides the other two off the side of the screen. There is no signal that anything is missing, so a reader can work through a page and never learn that a third of it was never shown. Stacking makes all of it reachable by scrolling down, which is the one direction everybody already scrolls.
Passes vs. fails
Passes
.layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 60em) {
.layout { grid-template-columns: 1fr 3fr 1fr; }
}Fails
.layout { display: grid; grid-template-columns: 240px 1fr 240px; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
Other ways to satisfy this rule
11 guides on this site are filed under 1.4.10 Reflow. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C31sufficientReflow content with flexbox at narrow widths
- C33sufficientBreak long URLs so nothing scrolls sideways
- C38sufficientLet labels and inputs wrap on narrow screens
- G206sufficientOffer a layout without horizontal scrolling
- G224sufficientPreserve meaningful indentation when text reflows
- G225sufficientKeep horizontal carousels usable at 320 pixels
This guide is our interpretation of W3C technique C32: Using media queries and grid CSS to reflow columns. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.