Foundation XY Grid: Minimal Design, Trust Boundaries, and Verification

Problem and Takeaway

When building responsive pages with Foundation’s XY grid, designers often face column overflow or unexpected spacing when gutters grow or custom CSS interferes. The takeaway: start with a minimal .grid-x container, let columns auto-size, and verify the layout at each breakpoint before adding overrides.

Requirements

The XY grid must support fluid layouts across defined breakpoints, allow columns to nest inside other rows, and permit custom gutter widths without breaking the baseline 12-column proportion.

Smallest Suitable Design

Use a single .grid-x container that wraps a row of direct children. Each child receives a column class such as .cell combined with size classes (.small-6, .medium-4, .large-3) or the auto-layout classes .auto and .shrink. No extra wrappers are required; the grid relies on flexbox to distribute space.

Trust and Data Boundaries

The grid is purely client-side: the browser reads the HTML and applies the Foundation CSS classes. No server-side state is exchanged, so the trust boundary is limited to the HTML/CSS delivered to the browser. Any class names that come from user-generated content must be sanitized to prevent injection of arbitrary CSS or HTML.

Operational Checks

1. Confirm the container has the .grid-x class.
2. Ensure every direct child of the container carries a column class (.cell with a size or auto class).
3. If explicit size classes are used, the sum of the numbers at a given breakpoint should not exceed twelve unless auto-layout classes are present.
4. Check that no horizontal scrollbar appears at the smallest breakpoint (usually small).

These checks can be performed manually by resizing the browser or automatically with a visual regression tool.

Example Implementation

<div class='grid-x grid-margin-x'>
  <div class='cell small-6 medium-4 large-3'>Column A</div>
  <div class='cell small-6 medium-4 large-3'>Column B</div>
  <div class='cell small-12 medium-4 large-3'>Column C</div>
  <div class='cell auto'>Column D (auto-size)</div>
</div>

This markup uses a single .grid-x row, mixes explicit spans (6+4+3+4 = 17 at small, but the small-6 and small-6 combine to 12, the medium-4s add to 12, and the large-3s add to 12) and an auto-sizing column that fills remaining space.

Limitations and Practical Verification

• Gutter values that exceed the viewport width at the smallest breakpoint cause horizontal overflow.
• Custom CSS that overrides display:flex or flex-basis can break the proportional sizing.
• Switching to a pure CSS-grid layout would require revisiting breakpoints and nested row logic.

To verify:

1. Open the page in a browser and resize to each breakpoint defined in $breakpoints (typically small, medium, large).
2. Confirm that columns reflow, that elements with .align-middle share the same height, and that no horizontal scrollbar appears.
3. For automated verification, run a visual regression test: npm run chromatic -- --storybook-url='http://localhost:6006' (adjust the URL to your Storybook instance). Compare the captured screenshots against a baseline; any shift beyond a threshold flags a layout issue.
4. Run a lint rule that enforces the grid contract: npx stylelint '**/*.scss' --rule 'foundation-grid/no-overlap' (replace with your actual rule name). The command should exit with code 0; any warning indicates a missing column class or an explicit span sum > 12 without auto classes.

Permissions: you need read access to the source files and write access to the output directories for Storybook or lint reports. No elevated privileges are required.

When the Design Should Change

Reconsider the minimal XY-grid approach if:

• Your project drops support for flexbox-capable browsers and must serve IE11 or earlier; a fallback grid or float-based layout becomes necessary.
• Design requirements call for non-proportional column ratios that cannot be expressed with the 12-column system (e.g., a 5-column equal split).
• Performance profiling shows that the flexbox layout causes excessive reflows on low-end devices; switching to CSS-grid with grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) may reduce layout thrashing.