Foundation's XY Grid: Responsive Layouts Without Hand-Written Media Queries

Every responsive layout starts the same way: one column on a phone, two on a tablet, three on a desktop. The usual implementation is a pile of media queries scattered through the stylesheet — and six months later nobody remembers which query controls which component, or why two of them disagree at 700px.

Foundation's XY Grid makes a different bargain: the responsive behavior lives in the markup itself, as breakpoint-prefixed classes like small-12 medium-6 large-4. This post explains what those classes encode, walks through a card row that reflows at Foundation's default breakpoints, and covers the trade-offs — including one to check before adopting Foundation for a new project.

What the breakpoint classes encode

The XY Grid was introduced in Foundation 6.4 as the successor to the framework's older float-based grid. It is built on flexbox — the CSS layout mode that distributes space along a row or column — so a container marked grid-x lays out its cell children in a row, and grid-y stacks them in a column.

The sizing grammar is where the responsive work happens. A cell with no sizing class takes the full row. small-12 means all 12 columns at the small breakpoint (which starts at 0px), medium-6 means 6 of 12 columns from 640px up, and large-4 means 4 of 12 from 1024px up. Those are the defaults; xlarge begins around 1200px.

Two details make the system easy to live with:

• Classes cascade upward: each applies from its breakpoint until a larger one overrides it, so you author mobile-first — state the small-screen behavior, then add classes only where the layout actually changes.
• Gutters are declarative: grid-margin-x puts margins between cells, while grid-padding-x pads each cell's inside instead. Either way, no hand-written spacing rules per component.

For mixed fixed-and-fluid layouts, cell shrink sizes a cell to its content and cell auto shares out whatever space remains — useful for a fixed sidebar beside flexible content.

A card row that reflows three times

The classic case: a card listing that stacks on phones, pairs on tablets, and sits three across on desktops.

<!-- Needs Foundation 6.4+ CSS on the page: compiled Sass, or a CDN link pinned to your version -->
<div class='grid-x grid-margin-x'>
  <div class='cell small-12 medium-6 large-4'>Card one</div>
  <div class='cell small-12 medium-6 large-4'>Card two</div>
  <div class='cell small-12 medium-6 large-4'>Card three</div>
</div>

To try it, put that markup on an HTML page that includes Foundation's compiled CSS — no build step needed for a first look — and open it in a browser. Below 640px the cards stack; from 640px to 1023px two sit side by side with the third wrapping; from 1024px all three share the row. The sidebar pattern is just as compact:

<div class='grid-x grid-margin-x'>
  <div class='cell shrink'>Sidebar</div>
  <div class='cell auto'>Main content fills the rest</div>
</div>

Notice what is absent: no media queries and no per-component CSS. The layout intent sits next to the content it governs — which is exactly why teams tend to either love or dislike this style of grid.

Trade-offs worth weighing

Maintenance status. Foundation 6.x development has slowed considerably over the years, and ZURB's stewardship of the project has changed. For an existing Foundation 6 codebase, the XY Grid is stable and well documented. For a new, long-lived project, verify the framework's current maintenance status before committing — a grid you cannot get fixes for is a liability.

Two grids coexist. Foundation 6 builds can include both the legacy float grid and the XY Grid, and tutorials from different eras use different conventions: row and column for the old one, grid-x and cell for the new. Mixing them in one layout produces broken rows, so check which grid your compiled CSS actually includes — the float grid can be switched off in the Sass settings.

Breakpoints are settings, not constants. The pixel values behind medium and large live in the Sass configuration, so identical markup can reflow at different widths in two projects. When copying grid markup between codebases, confirm the breakpoint settings match.

Verifying the result

Three quick checks, in order:

1. Resize test: drag the browser window across roughly 640px and 1024px and confirm the card row goes one, then two, then three columns.
2. Version check: in your project root, run npm ls foundation-sites and confirm the installed version is 6.4 or newer. If the command errors, Foundation is not in your dependencies; alternatively, look for the version banner comment at the top of the compiled CSS file.
3. DevTools inspection: select a cell in the browser inspector. You should see flexbox rules — percentage-based flex-basis and max-width at each breakpoint — not float declarations. Floats there mean you have loaded the legacy grid or the wrong stylesheet.

If you maintain a Foundation 6 application, the practical move is to reach for XY Grid classes on new layouts and replace one-off media queries wherever a breakpoint class expresses the same rule. If you are evaluating Foundation for something new, check its maintenance status first, pin your version, and document your breakpoint settings — then let the resize test tell you whether the grid is doing what the markup promises.