Moving Beyond Floats: Implementing the Foundation XY Grid

The Problem with Fixed-Height Rows

A common frustration in legacy web layouts is the "uneven card" problem. When you have a row of three feature cards, but one card has two more sentences of text than the others, the layout breaks. In older CSS systems, you had to choose between using JavaScript to calculate the tallest element's height or relying on float-based grids that left awkward gaps at the bottom of the shorter columns.

The takeaway is simple: if you are still using grid-container and grid-x (the legacy float system) in Foundation, you are fighting the browser. The XY Grid, introduced in Foundation 6, leverages Flexbox to handle vertical alignment and equal-height columns natively in the browser, eliminating the need for clearfix hacks or height-matching scripts.

How the XY Grid Works

The XY Grid shifts the mental model from "blocks and floats" to "containers and cells." Instead of floating elements to the left and clearing them later, you define a flex container that dictates how its children (cells) should behave.

The Container and Cell Relationship

The primary container is grid-x (for horizontal rows) or grid-y (for vertical stacks). Inside these containers, you place cell elements. Unlike the legacy grid, where you might specify a column size like small-6, the XY grid allows for more fluid control. You can still use size classes, but the cell class provides the flexbox properties necessary for alignment.

Managing Gutters and Spacing

Gutters—the space between columns—are handled via padding on the cells. If you need a layout that touches the edge of the screen without a margin, you can use collapse classes. For those using Sass, these gaps are configurable via variables like $grid-padding-gap, allowing you to change the spacing across the entire site from a single source of truth.

Worked Example: Equal-Height Pricing Cards

Consider a pricing table where the "Pro" plan has more features listed than the "Basic" plan. To ensure all cards stretch to the same height regardless of content, use the following structure. Run this in a project with Foundation 6.x installed via npm or CDN.

<div class="grid-x grid-margin-x align-top">
  <div class="cell small-12 medium-4">
    <div class="card">
      <div class="card-section">
        <h5>Basic</h5>
        <p>Limited features for starters.</p>
      </div>
    </div>
  </div>
  <div class="cell small-12 medium-4">
    <div class="card">
      <div class="card-section">
        <h5>Pro</h5>
        <p>Advanced tools, priority support, and unlimited storage for growing teams.</p>
      </div>
    </div>
  </div>
  <div class="cell small-12 medium-4">
    <div class="card">
      <div class="card-section">
        <h5>Enterprise</h5>
        <p>Custom solutions for large scale operations.</p>
      </div>
    </div>
  </div>
</div>

Verification: Open your browser's Developer Tools and inspect the .grid-x element. You should see display: flex. Because the default align-items property for flex containers is stretch, the .cell elements will all match the height of the tallest card, allowing the internal .card components to fill the space uniformly.

Trade-offs and Limitations

The transition to XY Grid isn't without risks. The most significant trade-off is browser compatibility. Flexbox is standard in all modern browsers, but if your project must support very old legacy browsers (like IE9), the XY grid will not render correctly. In those cases, the legacy float grid is a necessary fallback.

Additionally, mixing the legacy grid and the XY grid in the same component can lead to unexpected margin calculations. Because floats and flexbox handle spacing differently, nesting a grid-x (Flex) inside a grid-container (Float) can cause overflow issues or inconsistent gutters. It is an engineering best practice to migrate on a per-page or per-component basis rather than mixing them within a single layout block.

Actionable Migration Path

Don't attempt to rewrite your entire CSS architecture overnight. Instead, follow this incremental approach:

1. Audit: Identify one high-traffic page with alignment issues (like a footer or a feature grid).
2. Isolate: Replace the legacy grid-container and grid-x (float version) with the XY grid-x and cell classes.
3. Verify: Use browser dev tools to ensure display: flex is active and check the layout at your smallest and largest breakpoints.
4. Standardize: Add a note to your project's style guide or a linting rule to prevent developers from using legacy float classes in new components.