Skip to content
Acuity Experience Design
Menu

Pattern

Responsive grid system

Page structure on the 12-column .b-layout-grid: full width on phones, explicit spans from md, refinements at lg.

.b-layout-grid.b-subgrid.b-grid.b-wrapper.b-region

Use .b-layout-grid when things must line up with page columns (a main/aside split, rows of mixed widths). Use .b-grid instead for collections of equal tiles — it reflows on its own with no spans to maintain.

Preview

Acuity Brands Lighting

Each kit renders in its own frame and follows the theme and density set in the header. Open full-size ↗

HTML

Layout uses Beam compositions and utilities only. Buttons, inputs, toggles, badges and tables here are stand-ins so the preview renders — in product, use the Cantina components below.

<div class="[ b-wrapper b-region b-flow ]">
  <h1>Energy overview</h1>
  <div class="[ b-layout-grid ]">
    <section class="[ b-flow ] [ b-card ]" data-space="sm" data-span="8" data-span-lg="9">
      <h2 class="[ u-type-h5 ]">Usage this month</h2>
      <div class="[ b-frame ] [ b-placeholder ]">Chart</div>
    </section>
    <aside class="[ b-flow ] [ b-card ]" data-space="sm" data-span="4" data-span-lg="3">
      <h2 class="[ u-type-h5 ]">Summary</h2>
      <p class="[ u-type-body-sm u-text-neutral-secondary ]">Main is 8 columns at md and 9 at lg; this aside takes the rest.</p>
    </aside>
    <div class="[ b-card ]" data-span="4" data-span-sm="6">4 · sm 6</div>
    <div class="[ b-card ]" data-span="4" data-span-sm="6">4 · sm 6</div>
    <div class="[ b-card ]" data-span="4" data-span-sm="12">4 · sm 12</div>
    <div class="[ b-subgrid ]" data-span="12">
      <div class="[ b-card ]" data-span="3">Label column</div>
      <div class="[ b-card ]" data-span="9">Content aligned to the same tracks</div>
    </div>
  </div>
</div>

Recipe

The rules an agent follows to build this pattern. This is what goes into beam.skill.

  1. Use .b-layout-grid for page structure (main/aside splits, aligned rows). Use .b-grid for repeating tiles of equal width.
  2. Mobile-first: children are full width below sm. data-span-sm from sm, data-span from md, data-span-lg from lg.
  3. Spans in a row should add up to 12 at each breakpoint you set.
  4. Align nested content to the page columns with a .b-subgrid child spanning the parent columns.
  5. Gaps come from gutter-* density tokens; change with data-gap="sm|lg", never with margins.
beam.skill recipe (Markdown)
## Pattern: Responsive grid system
Page structure on the 12-column .b-layout-grid: full width on phones, explicit spans from md, refinements at lg.

Compositions: .b-layout-grid, .b-subgrid, .b-grid, .b-wrapper, .b-region

1. Use .b-layout-grid for page structure (main/aside splits, aligned rows). Use .b-grid for repeating tiles of equal width.
2. Mobile-first: children are full width below sm. data-span-sm from sm, data-span from md, data-span-lg from lg.
3. Spans in a row should add up to 12 at each breakpoint you set.
4. Align nested content to the page columns with a .b-subgrid child spanning the parent columns.
5. Gaps come from gutter-* density tokens; change with data-gap="sm|lg", never with margins.