Every horizontal band is a grid-x flex row. Direct children with class cell become columns. Size them with numbered classes (medium-6), fractional keywords (auto, shrink), or responsive collections (medium-up-2 on the row).
Cell sizing tools
small-12 medium-6 large-4— mobile-first track spansauto— grow to fill remaining spaceshrink— width fits content (icons, labels)- Nested
grid-xinside acell— sub-layouts inherit flex context
Important interview questions and answers
- Q: What does
medium-6mean?
A: From the medium breakpoint upward, the cell spans six of twelve columns (50% width); smaller viewports use classes defined for those breakpoints unless overridden. - Q:
cell autovsmedium-6?
A:medium-6fixes half width at md+;autoflex-grows to consume leftover space—handy for sidebars next to fluid content.
Self-check
- Write classes for a cell that is full width on mobile and half width on medium+.
- When is nesting
grid-xinside a cell appropriate?
Challenge
Two-column row
- Build
grid-xwith twocell medium-6children. - Narrow the preview — cells should stack on small viewports.
Done when: side-by-side columns on medium+ and stacked layout on narrow screens.