Foundation XY Grid: A Practical Guide to Cells, Gutters, and Breakpoints

If you are building a layout with Zurb Foundation 6, the XY Grid is the part you will touch most. The short version: wrap cells in grid-x inside a grid-container, size cells with breakpoint-prefixed classes like medium-6, and pick exactly one gutter strategy — margin or padding — per row. Most layout bugs people hit with Foundation come from mixing those two gutter types or from loading a CSS build that does not include the XY Grid classes at all.

How the XY Grid works

The XY Grid replaced Foundation's older float-based grid. It is pure flexbox: grid-x sets display: flex on the row, and each cell gets a flex-basis calculated from its size class and the gutter width. The default grid has 12 columns, controlled by the Sass variable $grid-columns, and the container max-width comes from $grid-container.

Breakpoints are mobile-first. small is the base and applies everywhere unless overridden; medium kicks in at 640px and large at 1024px by default. Both values are Sass-configurable, so treat them as project-specific, not universal.

A worked example

A three-card row that stacks on phones, sits two-up on tablets, and three-up on desktop:

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-6 large-4">Card A</div>
    <div class="cell small-12 medium-6 large-4">Card B</div>
    <div class="cell small-12 medium-6 large-4">Card C</div>
  </div>
</div>

Reading the classes: on a narrow screen every cell is small-12 (full width, stacked). At 640px and up, medium-6 makes each cell half a row, so two fit per line. At 1024px and up, large-4 gives three per row. You never write classes for "down" — overrides only apply upward.

To verify the grid CSS is actually loaded, open browser devtools, select a cell, and confirm you see flexbox rules such as flex: 0 0 auto with a width calculated from the gutter. If the cell has no flex styles, your build is missing the XY Grid (see the pitfalls below).

Gutters: margin vs. padding

Foundation offers two gutter flavors, and they behave differently:

• grid-margin-x — cells get horizontal margins, and their widths shrink so the row still adds up to 100%. Cell backgrounds stop at the content box, so you see gaps between cards.
• grid-padding-x — cells get inner padding instead. Widths stay at the raw fraction, so backgrounds touch; the gap appears inside each cell.

The common mistake is nesting or combining them on the same row, or applying grid-margin-x to a row and then wondering why a child grid-x inside a cell is misaligned. Pick one per row. If you need a visible card with a gap, use margin gutters and put the card styling directly on the cell. If you need full-bleed backgrounds with spaced content, use padding gutters.

Vertical grids and content-sized cells

grid-y turns the same system vertical, but it only works if the container has an explicit height — a flex column with no height just grows with its content, and the sizing classes appear to do nothing. Set a height (for example style="height: 500px" or a CSS class) before debugging the classes.

Two special cell sizes are worth knowing: auto lets a cell expand to fill remaining space, and shrink sizes the cell to its content. A classic pattern is a fixed sidebar next to a fluid main area: <div class="cell shrink">sidebar</div><div class="cell auto">main</div>.

Common pitfalls and limits

• Missing CSS build. The XY Grid requires the foundation-xy-grid-classes build (or the full foundation.css). Projects importing only the legacy float grid get no grid-x styles and fail silently — the page just looks unstyled. Check your Sass imports or the compiled CSS header.
• Version drift. Sass variable names and mixin signatures have shifted between Foundation 6 minor releases. Confirm the version in package.json before copying examples from documentation or blog posts.
• Assuming default breakpoints. If a previous developer changed $breakpoints in the project settings, 640px/1024px no longer apply. Check the project's settings file rather than trusting memory.
• Project momentum. Foundation 6 is stable and works, but development activity has slowed considerably. For an existing Foundation codebase the XY Grid is the right tool; for a brand-new project, weigh community activity and ecosystem against alternatives before committing.

Checking your result

Build a minimal page with the three-cell example above, then resize the browser across 640px and 1024px. You should see the layout shift from stacked, to two-per-row, to three-per-row at those widths. In devtools, the computed width of a medium-6 cell with margin gutters should be slightly under 50% of the row — the difference is the gutter. If widths are exactly 50%, you are probably looking at padding gutters; if there is no flex styling at all, the XY Grid CSS is not loaded.