The XY grid mindset

In Foundation 6, your default layout tool is the XY grid: a horizontal row is grid-x, children are cell elements, and width is controlled with breakpoint classes like small-12 medium-6. Helpers and components sit on top— not instead of—the grid.

XY vs legacy float grid

Older Foundation versions used row and columns with floats. Foundation 6’s XY grid is flexbox-based: one-dimensional rows (grid-x) and optional vertical stacks (grid-y). Think “flex row of cells” before reaching for float utilities.

When to use grid vs flex helpers

• Page columns and marketing bands → grid-container + grid-x + sized cell
• Toolbar alignment inside one cell → align-middle, align-justify on grid-x
• One-off spacing → margin/padding helpers (margin-top-2) or cell padding utilities

Review CSS flexbox if auto, shrink, and align-* classes feel magical—they map directly to flex properties Foundation sets for you.

Important interview questions and answers

1. Q: What are the three core XY grid classes?
   A: grid-container (max-width wrapper), grid-x (horizontal flex row), and cell (column child)—plus breakpoint width classes on cells.
2. Q: Does Foundation still use a 12-column system?
   A: Yes—width classes like medium-6 mean six of twelve tracks at the medium breakpoint and up, similar in spirit to Bootstrap’s half-width columns.

Self-check

1. What class turns a div into a horizontal flex row in Foundation 6?
2. When would you use cell auto instead of medium-6?