Foundation XY Grid: Building Responsive Layouts with Flexbox

When you need a layout that shifts from a single column on phones to multiple columns on tablets and desktops, writing custom media queries for each breakpoint quickly becomes tedious. Zurb Foundation’s XY Grid solves that by encoding the responsive behavior directly in HTML classes, letting you describe the layout once and let the framework handle the rest.

How the XY Grid works

Introduced in Foundation 6.4, the XY Grid replaces the old float‑based system with a flexbox model. A container with grid-x creates a horizontal row; grid-y creates a vertical stack. Direct children of these containers are marked with cell. Because flexbox handles the layout, you no longer need clearfix hacks or negative margins.

Responsiveness lives on the cells themselves. Classes such as small-12, medium-6, and large-4 tell the cell how many of the twelve columns it should occupy at and above the named breakpoint. The framework is mobile‑first, so unprefixed or small- classes apply until a larger breakpoint overrides them. For example, small-12 medium-6 large-4 means full width on small screens, half width from the medium breakpoint up, and one‑third width from the large breakpoint up.

Gutters, framing, and flexible sizing

Gutters can be added with margin‑based or padding‑based utilities. grid-margin-x (or grid-margin-y) applies horizontal (or vertical) margins between cells, leaving the gap transparent. grid-padding-x uses padding instead, which colors the gap with the cell’s background—useful when cells have distinct fills.

For app‑shell layouts where the page itself should not scroll but inner regions should, add grid-frame to a full‑height wrapper. This changes the scrolling context so that only the framed sections scroll.

When you need a fixed‑width column next to a fluid one, use shrink and auto. cell medium-shrink sizes the column to its content width at the medium breakpoint and up, while cell medium-auto expands to fill the remaining space. On smaller screens both become full width and stack.

Worked example: fixed sidebar with fluid content

The following markup creates a sidebar that shrinks to its content width on medium screens and up, while the main area takes the rest of the row. On phones both elements stack.

<div class="grid-x">
  <aside class="cell small-12 medium-shrink">
    <!-- Sidebar content (e.g., filters) -->
  </aside>
  <main class="cell small-12 medium-auto">
    <!-- Main content (e.g., results list) -->
  </main>
</div>

To see the gutter difference, toggle between grid-margin-x and grid-padding-x on the container in your browser’s dev tools and observe the box model.

Trade‑offs and limitations

Compared with native CSS Grid, the XY Grid offers less two‑dimensional expressiveness—you cannot place items explicitly in rows and columns or overlap regions without extra markup. If your layout truly requires grid tracks in both dimensions, writing CSS Grid directly may be simpler.

Against utility‑first frameworks like Tailwind, XY Grid provides fewer, more opinionated classes. This can make markup cleaner but gives you less per‑element control over spacing, sizing, and alignment.

Two practical cautions: Foundation’s release cadence has slowed in recent years, so verify the project’s maintenance status and browser support policy before starting a new project. Also, any documentation that references the pre‑6.4 float grid (using row and columns) will not apply to the XY Grid; older tutorials may mislead you.

Next steps

To evaluate the grid for yourself, copy the three‑cell example below into a blank page that includes Foundation’s CSS, then resize the browser across the default medium breakpoint (640 px). You should see the cards stack on narrow screens and sit three‑wide on wider screens.

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

Open dev tools, inspect one cell, and switch the container between grid-margin-x and grid-padding-x to confirm how the gutter affects the box model. This quick check tells you whether the grid’s gutter approach matches your design needs.