Building a Responsive Layout with Zurb Foundation’s XY Grid

Desired Outcome

Produce a page that automatically adapts to the viewport width:

• Content sits inside a centered container.
• Rows divide the page into cells that stack vertically on small screens.
• Cells arrange side‑by‑side at medium and larger breakpoints, according to the 12‑column grid.
• All spacing comes from Foundation’s grid classes, eliminating the need for custom media queries.

Prerequisites

• A working HTML page that loads Foundation’s CSS (via CDN or a locally compiled Sass build). The example below uses the CDN link from https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css.
• Modern browser with developer tools (Chrome, Firefox, Edge).
• Basic knowledge of adding class attributes to HTML elements.
• If you plan to customize grid settings, a Sass pipeline that can compile _settings.scss and foundation.scss.

Procedure

1. Wrap content in a container. Add the grid-container class to a top‑level <div> so Foundation can center and constrain the layout.

   <div class="grid-container">
     
   </div>

2. Create a row. Inside the container, add a <div> with grid-x. Choose either grid-margin-x for gutters between cells or grid-padding-x for padding inside the row. Pick one and use it consistently.

   <div class="grid-x grid-margin-x">
     
   </div>

3. Add cells. Inside the row, add child <div> elements with the cell class. Combine cell with size classes to control column spans per breakpoint:
   • small-12 – full width on the smallest breakpoint.
   • medium-6 – two columns side‑by‑side on medium screens.
   • large-4 – three columns on large screens.

   <div class="cell small-12 medium-6 large-4">
     
   </div>

4. Optional: Nested rows. If a cell contains its own grid, nest a grid-x inside the cell and apply the same rules.

Expected Checks

• Open the page in a browser, open the devtools Responsive Design Mode, and resize the viewport across the named breakpoints: small (<650 px), medium (≥ 640 px), large (≥ 1024 px), xlarge (≥ 1200 px), xxlarge (≥ 1440 px). Verify that cells stack on small and lay out horizontally on larger sizes.
• Inspect the computed styles for grid-container, grid-x, and cell to ensure that padding/margin values match Foundation’s defaults.
• Check the page width to ensure no horizontal scrollbar appears; the container should keep the layout centered.
• Verify that the stylesheet loaded is the version you expect (e.g., 6.7.5) by looking at the filename in the network tab or the comment block at the top of the CSS file.

Recovery Options

• Columns collapse incorrectly. Look for typos in class names (e.g., grid-x vs. grid-x), ensure each row has grid-x, and that it is inside a grid-container.
• Gutters appear doubled. Remove any legacy row or columns classes that add their own margins, and keep only grid-margin-x or grid-padding-x.
• A specific cell misbehaves. Temporarily set it to small-12 to force full width, then gradually re‑apply the desired size classes while testing.
• Unexpected horizontal overflow. Check for any child elements with width: 100vw or negative margins that exceed the container.

Engineering Decision Note

Foundation’s XY Grid is the recommended layout system in Foundation 6 and newer. It replaces the older float‑based and flex‑based grids, which are deprecated. However, Foundation’s development has slowed in recent years; it remains stable but may lack new features found in other modern frameworks. If you are starting a brand‑new project and need rapid iteration, consider frameworks that are actively maintained, but if you already rely on Foundation for other UI components, the XY Grid is a low‑change, reliable choice.