Mastering Zurb Foundation’s XY Grid: A Practical Guide to Responsive Layouts

What Problem Does the XY Grid Solve?

When building a website that must look good on phones, tablets, and desktops, developers often wrestle with how to stack and resize columns. Prior to Foundation 6.4, the framework used a float‑based grid that required clearfix hacks and manual width calculations. The new XY Grid replaces that with a flexbox‑based system that is mobile‑first, automatically handles gutters, and lets you mix fixed and fluid columns without manual math.

How the XY Grid Works

The XY Grid is built on two container classes: grid-x for horizontal (row‑like) layout and grid-y for vertical (column‑like) layout. Inside those containers you place cell elements. Each cell can receive sizing classes that map to a 12‑column mental model: small-6, medium-4, large-3, etc. The unprefixed or small-* classes apply to all viewports; medium-* and large-* override those at their respective breakpoints.

Key features:

• Mobile‑first breakpoints – design for the narrowest screen first, then scale up.
• Auto‑sizing cells – auto cells share remaining space; shrink fits content.
• Gutter control – grid-margin-x or grid-padding-x add spacing between cells.
• No JavaScript required – pure CSS, so it works in static sites and server‑rendered pages.
• Customizable via Sass – change $grid-breakpoints or $grid-gutter-width in _settings.scss to match your design tokens.

Building a Responsive Example

Below is a minimal page that demonstrates a three‑column layout on large screens, two columns on medium, and a single column on small. The example uses grid-x with margin gutters.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/foundation.min.css">
</head>
<body>
  <div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-6 large-4" style="background:#f5a"">Column 1
    <div class="cell small-12 medium-6 large-4" style="background:#a5f5a">Column 2
    <div class="cell small-12 medium-12 large-4" style="background:#5a5f5">Column 3
  </div>
</body>
</html>

Run this file in a browser, then resize the window:

• Below 640px (default small breakpoint) each cell spans the full width, stacking vertically.
• Between 641px and 1024px (default medium breakpoint) the first two cells sit side‑by‑side, each 50% width; the third cell wraps to a new row.
• Above 1025px (default large breakpoint) all three cells sit in one row, each taking 33.33% width.

To verify the CSS is applied correctly, open the browser’s dev tools, inspect one cell, and confirm the computed width matches the expected percentage at each breakpoint.

Trade‑offs & When to Avoid It

While the XY Grid is powerful, it’s not a silver bullet:

• Browser support – Flexbox is widely supported in modern browsers, but legacy IE9+ has quirks. If your audience still uses IE8, the grid will break.
• Learning curve – The class naming scheme (e.g., small-6, medium-4) differs from other frameworks. Mixing float‑based and XY classes in the same project can cause confusion.
• Performance – Flexbox calculations are lightweight, but on very large pages with many nested grids, rendering can become slower on low‑end devices.
• Customization overhead – If you need non‑12‑column ratios or custom gutter sizes, you’ll have to override the Sass settings or write custom CSS, which adds maintenance burden.

Use the XY Grid when you need a clean, mobile‑first, flexbox‑based layout that works without JavaScript and you’re comfortable working within Foundation’s class conventions.

Next Steps

1. Install Foundation via npm or CDN and confirm you’re on a version that includes the XY Grid (Foundation 6.4+).

npm install foundation-sites@^6.6.3

2. Open node_modules/foundation-sites/scss/settings/_settings.scss and adjust $grid-breakpoints or $grid-gutter-width to match your design system.

3. Build your CSS with sass or gulp to generate the customized stylesheet.

4. Test in your target browsers, especially the oldest supported version, using a tool like BrowserStack or a local virtual machine.

By following these steps, you’ll have a responsive, maintainable layout that leverages Foundation’s XY Grid without unexpected side effects.