Foundation 6 XY Grid: Responsive Layout with grid-x and cell

Need responsive columns without writing custom media queries? In Foundation 6 the practical default is the XY Grid. Use a grid-x flex container, add grid-padding-x for gutters, and size each child with cell small-* medium-* large-* classes. The grid is CSS only, so no JavaScript initialization is required for layout.

How XY Grid maps to flexbox

grid-x creates a flex container in row direction with flex-wrap: wrap. Children must be cell. A size class sets flex-basis as a percentage of the 12-column grid. grid-padding-x adds horizontal gutters via padding on the cells, not margins on the container.

Flex-basis is the initial main-size of a flex item. Foundation sets flex: 0 0 auto on cells and overrides the basis with the size class. Gutters are padding based, so the visual column width is basis minus padding.

Worked markup for three cards that stack on small, two per row on medium, three per row on large:

<link rel=\"stylesheet\" href=\"foundation.min.css\">
<div class='grid-x grid-padding-x'>
  <div class='cell small-12 medium-6 large-4'>A</div>
  <div class='cell small-12 medium-6 large-4'>B</div>
  <div class='cell small-12 medium-6 large-4'>C</div>
</div>

At the small breakpoint each cell is small-12, full width. At medium the basis becomes 50% via medium-6. At large the basis becomes ~33.33% via large-4. Source order in the markup is source order on screen because XY Grid is flexbox, not grid.

Limits of the flex-based system

XY Grid is flexbox only. Equal-height columns are native, but reordering requires explicit order utilities. Wrapping is controlled by flex-wrap on grid-x, so cells that exceed the row will wrap to the next line.

Gutters are padding based. Nesting requires an inner grid-x to reset the padding context. Without an inner grid, child cells inherit the parent cell’s padding and the gutter math breaks.

Very deep nesting increases specificity and can cause unexpected shrink behavior with auto margins. Custom padding overrides on .cell change the box model and break alignment unless you also compensate the gutter.

Version sensitivity matters. XY Grid is Foundation 6.x. Foundation 5 used .row with .columns and float layout. Code from older tutorials will not work with XY classes.

Common markup mistakes in production

• Missing grid-x parent. Applying cell classes directly to elements yields block stacking because no flex context exists.
• Size sum exceeds 12. Using small-8 + small-8 in one row forces wrap. The 12-column math is per breakpoint.
• Mixing Foundation 5 and 6 classes. .row / .columns with grid-x / cell creates conflicting rules.
• Forgotten gutters. Omitting grid-padding-x or grid-margin-x when gutters are expected leads to collapsed spacing. grid-margin-x uses negative margins on the container instead of cell padding.

Verify the grid is working

Create a minimal HTML file that loads Foundation 6 CSS and the worked example above. Open it in a browser and resize the viewport. Cells should change from 12 to 6 to 4 columns at the defined breakpoints.

In dev tools inspect the grid-x element and confirm computed display: flex and flex-wrap: wrap. Inspect a cell and confirm flex: 0 0 auto with a percentage flex-basis matching the active size class.

Temporarily remove grid-x from the markup. Cells should stack as block elements, confirming the parent is required for the grid behavior. Restore the parent to return to flex layout.