Responsive Grids With Foundation XY Grid

Problem: Your Foundation layout won’t reflow across breakpoints

When a Foundation‑based design collapses or overflows as the browser narrows, the culprit is often the legacy float grid still present in older projects. The useful takeaway: Foundation’s XY Grid replaces floats with a flexbox utility system, letting you build responsive layouts with fewer spacer classes and more predictable alignment.

Prerequisites

• Foundation CSS bundle installed (version 6.0 or later recommended for XY Grid support)
• A wrapper element with the .grid-container class to scope the grid and prevent leakage into other layout systems
• Familiarity with breakpoint suffixes: .small-, .medium-, .large-, etc., which map columns to screen widths
• A browser with developer tools for the verification steps described later

Procedure: Implementing XY Grid

1. Include the Foundation CSS file in your project. If using a package manager, run npm install foundation-sites and import the grid component, or add the compiled CSS via a CDN.
2. Mark up a grid container in your HTML:

<div class="grid-container">
  <div class="grid-x">
    <div class="cell small-6 medium-4 large-3">…</div>
    <div class="cell small-6 medium-4 large-3">…</div>
  </div>
</div>

3. Place cells inside a row. Use .grid-x for a horizontal layout or .grid-y for a vertical stack. Apply breakpoint‑specific column classes to each .cell to control width at different screen sizes. The default system is 12 columns, so .small-6 spans half the width on small screens, .medium-4 spans one‑third on medium screens, and .large-3 spans one‑quarter on large screens.
4. For auto‑sizing a cell to fill remaining space, add .small-auto or .medium-auto to the cell’s class list.
5. Create gutters without empty spacer cells by using offset classes. For example, .medium-offset-2 on a cell shifts it right by two columns on medium screens.
6. Control row‑level alignment with .align-center, .align-justify, or .align-spaced. For individual cells, use .align-self-middle to override the row alignment.

Expected Checks

1. Resize the browser window across small, medium, and large breakpoints. Cells should reflow smoothly and maintain the column ratios defined by their classes.
2. Open developer tools, select the .grid-x element, and confirm that the computed display: flex style is applied.
3. In the Elements panel, verify that each .cell has a width computing to the intended fraction of the 12‑column grid (for example, .small-6 should compute to 50% on small screens).
4. Check the browser console for any missing stylesheet errors or initialization warnings that would prevent grid classes from applying.

Comparison: XY Grid vs. Legacy Float Grid

Aspect	XY Grid (Flexbox)	Legacy Float Grid
Layout mode	display: flex on the row	float: left on cells
Column sizing	Breakpoint‑specific utility classes (.cell small-6)	Fixed classes (.small-6 with explicit widths)
Vertical stacking	.grid-y on the row	Requires clearfix and manual width calculations
Gutter control	.medium-offset-2	.row with margin gutters
Browser support	Requires flexbox support; degrades gracefully in older browsers	Wider historic browser compatibility

Recovery & Limitations

1. Float grid conflicts: Avoid mixing .grid-x (XY Grid) with legacy .row and .column classes on the same element. If a layout breaks, remove XY Grid classes and wrap content in the traditional .row container with .column cells. Foundation 6 retains the float grid for backward compatibility, so this rollback is straightforward.
2. Flexbox dependency: XY Grid requires browsers that support flexbox. Layouts may degrade on older mobile browsers without partial support. Test your target audience’s browser coverage before deploying to production.
3. Class‑name variation: Breakpoint suffixes and utility classes can differ across Foundation 6 minor releases. Always validate the generated markup against the exact version installed in your project.
4. Recovery step: If the grid breaks unexpectedly, comment out the XY Grid row markup and wrap content in the legacy .row container with .column cells. Verify that the fallback layout restores before re‑introducing XY Grid classes in a separate section.