Grid

The grid object provides a 12-column layout system built on CSS Grid (with a float fallback). Wrap columns in an .obj-grid container and assign span classes to each child.

Simple Grid

Human-readable aliases for common column widths. These are the easiest way to build layouts.

Class	Width
`.obj-grid__full`	100% (12 of 12)
`.obj-grid__three-quarter`	75% (9 of 12)
`.obj-grid__two-third`	66.66% (8 of 12)
`.obj-grid__half`	50% (6 of 12)
`.obj-grid__third`	33.33% (4 of 12)
`.obj-grid__quarter`	25% (3 of 12)

Plural forms .obj-grid__two-thirds and .obj-grid__three-quarters are also supported.

Extended Grid

For finer control, use the numeric {span}-12 pattern to specify any column count from 1 to 12.

Class	Columns	Width
`.obj-grid__1-12`	1	8.33%
`.obj-grid__2-12`	2	16.66%
`.obj-grid__3-12`	3	25%
`.obj-grid__4-12`	4	33.33%
`.obj-grid__5-12`	5	41.66%
`.obj-grid__6-12`	6	50%
`.obj-grid__7-12`	7	58.33%
`.obj-grid__8-12`	8	66.66%
`.obj-grid__9-12`	9	75%
`.obj-grid__10-12`	10	83.33%
`.obj-grid__11-12`	11	91.66%
`.obj-grid__12-12`	12	100%

Responsive Breakpoints

All column classes support responsive suffixes. At narrow viewports columns default to full width; add a breakpoint suffix to apply the span from that breakpoint up.

Suffix	Min-width
`@sm`	30rem (480px)
`@md`	50rem (800px)
`@lg`	60rem (960px)
`@xl`	80rem (1280px)
`@print`	Print media

Gap Modifiers

Control spacing between grid items. Apply to the .obj-grid container.

Class	Gap
`.obj-grid--gap-none`	0
`.obj-grid--gap-xs`	0.25rem
`.obj-grid--gap-sm`	0.5rem
`.obj-grid--gap-md`	1rem
`.obj-grid--gap-lg`	1.5rem
`.obj-grid--gap-xl`	2.5rem
`.obj-grid--gap-xxl`	3.5rem

Use .obj-grid--column-gap-* or .obj-grid--row-gap-* to set horizontal or vertical gaps independently. All gap classes support responsive @bp suffixes.

Alignment

Container-level alignment controls how items are positioned within the grid.

Class	Description
`.obj-grid--align-items-center`	Center items on the cross axis
`.obj-grid--align-items-start`	Align items to the start
`.obj-grid--align-items-end`	Align items to the end
`.obj-grid--align-items-stretch`	Stretch items to fill the row height (default)

Item-level alignment is available via .obj-grid--align-self-* and .obj-grid--jusify-self-* classes, using the same values (center, start, end, stretch). These also support responsive @bp suffixes.

Examples

Equal Halves

Two columns at 50% width using .obj-grid__half.

Half

<div class="obj-grid obj-grid--gap-md">
  <div class="obj-grid__half util-background-odyssey util-pad-all-md">Half</div>
  <div class="obj-grid__half util-background-creamery util-pad-all-md">
    Half
  </div>
</div>

Thirds

Three equal columns using .obj-grid__third.

Third

<div class="obj-grid obj-grid--gap-md">
  <div class="obj-grid__third util-background-odyssey util-pad-all-md">
    Third
  </div>
  <div class="obj-grid__third util-background-creamery util-pad-all-md">
    Third
  </div>
  <div class="obj-grid__third util-background-odyssey util-pad-all-md">
    Third
  </div>
</div>

A common pattern using .obj-grid__quarter for a sidebar and .obj-grid__three-quarter for the main content.

Sidebar (25%)

Main Content (75%)

<div class="obj-grid obj-grid--gap-md">
  <div class="obj-grid__quarter util-background-creamery util-pad-all-md">
    Sidebar (25%)
  </div>
  <div class="obj-grid__three-quarter util-background-odyssey util-pad-all-md">
    Main Content (75%)
  </div>
</div>

Extended Grid — Asymmetric

An uneven split using the numeric pattern: .obj-grid__5-12 and .obj-grid__7-12.

5 of 12

7 of 12

<div class="obj-grid obj-grid--gap-md">
  <div class="obj-grid__5-12 util-background-odyssey util-pad-all-md">
    5 of 12
  </div>
  <div class="obj-grid__7-12 util-background-creamery util-pad-all-md">
    7 of 12
  </div>
</div>

Extended Grid — Mixed Widths

Multiple columns with different spans totaling 12.

<div class="obj-grid obj-grid--gap-sm">
  <div class="obj-grid__2-12 util-background-odyssey util-pad-all-md">2</div>
  <div class="obj-grid__3-12 util-background-creamery util-pad-all-md">3</div>
  <div class="obj-grid__4-12 util-background-odyssey util-pad-all-md">4</div>
  <div class="obj-grid__3-12 util-background-creamery util-pad-all-md">3</div>
</div>

Responsive Columns

Columns that stack on small screens and rearrange at larger breakpoints. Full width by default, halves at md, thirds at lg.

Column 1

Column 2

Column 3

<div class="obj-grid obj-grid--gap-md">
  <div
    class="obj-grid__full obj-grid__half@md obj-grid__third@lg util-background-odyssey util-pad-all-md"
  >
    Column 1
  </div>
  <div
    class="obj-grid__full obj-grid__half@md obj-grid__third@lg util-background-creamery util-pad-all-md"
  >
    Column 2
  </div>
  <div
    class="obj-grid__full obj-grid__half@md obj-grid__third@lg util-background-odyssey util-pad-all-md"
  >
    Column 3
  </div>
</div>

Gap Sizes

Comparing small and large gap modifiers on the same layout.

XS gap

<div class="obj-grid obj-grid--gap-xs">
  <div class="obj-grid__quarter util-background-odyssey util-pad-all-sm">
    XS gap
  </div>
  <div class="obj-grid__quarter util-background-creamery util-pad-all-sm">
    XS gap
  </div>
  <div class="obj-grid__quarter util-background-odyssey util-pad-all-sm">
    XS gap
  </div>
  <div class="obj-grid__quarter util-background-creamery util-pad-all-sm">
    XS gap
  </div>
</div>

XL gap

<div class="obj-grid obj-grid--gap-xl">
  <div class="obj-grid__quarter util-background-odyssey util-pad-all-sm">
    XL gap
  </div>
  <div class="obj-grid__quarter util-background-creamery util-pad-all-sm">
    XL gap
  </div>
  <div class="obj-grid__quarter util-background-odyssey util-pad-all-sm">
    XL gap
  </div>
  <div class="obj-grid__quarter util-background-creamery util-pad-all-sm">
    XL gap
  </div>
</div>

Aligned Items

Items of varying height centered on the cross axis using .obj-grid--align-items-center.

Short

Tall