The XY grid and layout

Install Foundation, build a responsive layout with the XY grid, and learn the cell classes the whole system is built on.

Install and load

npm install foundation-sites

# compile the Sass yourself so you control the settings
npx sass --load-path=node_modules/foundation-sites/scss src/app.scss dist/app.css

// src/app.scss
@import 'foundation';

@include foundation-global-styles;
@include foundation-typography;
@include foundation-xy-grid-classes;
@include foundation-button;
@include foundation-reveal;   // only the components you actually use

A CDN stylesheet is fine for a prototype; the Sass build is what you want in a real project, because Foundation's defaults are opinionated and you will override them.
Including components one by one keeps the stylesheet small — foundation-everything ships markup for features you may never render.
Design tokens (colours, breakpoints, spacing) live in _settings.scss. Copy it into your project and import it before the framework.

Rows, cells and breakpoints

The current grid is the XY grid: a flex container (grid-x horizontally, grid-y vertically) holding cell children. A cell is sized with a breakpoint prefix plus a number out of twelve.

<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <div class="cell small-12 medium-6 large-4">third on desktop</div>
    <div class="cell small-12 medium-6 large-4">third on desktop</div>
    <div class="cell small-12 medium-12 large-4">full width on mobile</div>
  </div>
</div>

Sizes cascade upward: small-12 medium-6 means twelve columns below 640px and six from 640px onward, so you rarely need to restate a class at every breakpoint.

Prefix	Applies from	Cells available
`small`	0	`small-1` … `small-12`
`medium`	640px	also `medium-offset-`, `medium-order-`
`large`	1024px	same family of classes
`xlarge`	1200px	same family of classes
`xxlarge`	1440px	same family of classes

💡

Do not rewrite the breakpoint values in the class names — Foundation emits every class for every breakpoint you enable, so keep the compiled set to the breakpoints you actually design for.

Alignment, gutters and self-sizing

<div class="grid-x grid-margin-x align-middle align-center">
  <div class="cell shrink">logo</div>
  <div class="cell auto">flexes to fill the space left over</div>
  <div class="cell small-12 medium-4 medium-offset-2">offset by two</div>
</div>

auto takes the remaining space; shrink hugs its content — between them you can express most toolbars without fixed widths.
grid-padding-x puts gutters inside the cell as padding; grid-margin-x puts them outside as margins. Padding is safer when cells have background colours.
Alignment classes go on the container: align-center, align-right, align-justify, align-spaced, align-middle.
Direction helpers (grid-x vs grid-y) plus order-* classes let you reorder content visually without touching the source order in the markup.

FAQ

Should I use grid-container or grid-x on the page wrapper?

grid-container centres the layout and applies a max width plus side padding. Put one per page section, then a grid-x row inside for each band of content.

How do I make a two-column layout with a sidebar?

grid-x with cell small-12 medium-4 for the sidebar and cell small-12 medium-8 for the main column; swap to a grid-y at small sizes if you prefer stacking.

Components and utilities CSS Grid

Last refreshed 2026-09-18.

The XY grid and layout

Install and load

Rows, cells and breakpoints

Alignment, gutters and self-sizing

FAQ

Related