Using Foundation's XYZ Grid for Asymmetric Card Layouts

Problem: Uneven card grids need custom CSS

When a blog post requires a three‑column card layout that collapses to a single column on narrow screens, many teams resort to writing custom media queries or overriding Foundation’s float‑based grid. This adds maintenance overhead and can break when the framework updates.

Thesis: Foundation’s XYZ Grid (v6.4+) provides a flexbox‑based, nestable system that lets you achieve the same result with only HTML classes and a few Sass variables.

Understanding the XYZ Grid

The XYZ Grid replaces the legacy float grid with a flexbox implementation. Key concepts:

• .grid-x creates a horizontal flex container.
• .grid-margin-x adds gutters between columns.
• .cell elements become flex items; their width is controlled by breakpoint classes like .small-12, .medium-4, .large-3.
• Nesting works because each nested .grid-x inherits the parent’s flex context.

Building an asymmetric three‑column card layout

The following markup produces three cards of unequal width that stack vertically below 640 px.

<!-- Run this in any Foundation v6.4+ project with the flex build -->
<div class="grid-x grid-margin-x">
  <div class="cell small-12 medium-4 large-3">
    <div class="card">
      <div class="card-section">
        <h4>Card One</h4>
        <p>Short content.</p>
      </div>
    </div>
  </div>
  <div class="cell small-12 medium-8 large-6">
    <div class="card">
      <div class="card-section">
        <h4>Card Two</h4>
        <p>Longer content that illustrates asymmetry.</p>
      </div>
    </div>
  </div>
  <div class="cell small-12 medium-12 large-3">
    <div class="card">
      <div class="card-section">
        <h4>Card Three</h4>
        <p>Side note or related links.</p>
      </div>
    </div>
  </div>
</div>

Only the grid classes are used; no custom CSS is required for the basic layout.

Customizing gutters and breakpoints

To adjust the space between columns, override the Sass variable before importing Foundation:

$grid-column-gutter: 1.5rem; // default is 1rem
@import "foundation";

If you need a different collapse point, change the Sass map:

$breakpoints: (
  small: 0,
  medium: 640px,   // changed from default 768px
  large: 1024px
);
@import "foundation";

Recompile the Sass to produce CSS that reflects these values.

Limitations and verification

• The XYZ Grid requires the flexbox‑compatible build of Foundation. Using the legacy float grid will not provide nesting or automatic vertical alignment.
• IE10 and earlier lack full flexbox support; a polyfill or fallback grid is necessary for those browsers.
• Changing breakpoints via Sass demands a rebuild; overriding with plain CSS can cause specificity conflicts.

To verify the layout:

1. Consult the official documentation for your Foundation version (e.g., docs.foundation.zurb.com/sites/6.7.5/grid.html) to confirm class names and breakpoint map.
2. Run a local Foundation project, open the page in Chrome DevTools, and inspect the .grid-x element. Verify that flex direction is row and that columns wrap at the expected width.
3. Resize the viewport below the medium breakpoint (640 px in the example) and confirm the cards become width: 100% and stack.

Actionable closing

Start by enabling the flex build in your Foundation setup, then replace any custom card‑grid markup with the XYZ Grid classes shown above. Adjust gutters or breakpoints via Sass as needed, and validate the result in the browser’s dev tools. This approach reduces CSS maintenance while keeping the layout fully responsive.