Layout

Grid System

A ratio-based flexbox grid. Think in percentages — unit-50 is 50%, unit-33 is 33%. Responsive prefixes handle every breakpoint.

Basics

Container, Row, and Units

Wrap content in units-container (max-width 1200px, centered), then use units-row with unit-* children.

unit-100

unit-50

unit-33

unit-25

<div class="units-container">
  <div class="units-row">
    <div class="unit-25">Sidebar</div>
    <div class="unit-75">Content</div>
  </div>
</div>

Widths

All Available Widths

Every ratio from 10% to 100%: unit-10, unit-20, unit-25, unit-30, unit-33, unit-35, unit-40, unit-50, unit-60, unit-65, unit-66, unit-70, unit-75, unit-80, unit-90, unit-100, plus precision widths unit-12, unit-38, unit-62, unit-88, and unit-auto.

unit-10

unit-12

unit-20

unit-25

unit-30

unit-33

unit-35

unit-38

unit-40

unit-50

unit-60

unit-62

unit-65

unit-66

unit-70

unit-75

unit-80

unit-88

unit-90

unit-100

unit-auto (fills remaining)

Centering & Alignment

`centered` / `unit-centered`	Center a unit with margin: 0 auto
`unit-role-right`	Float a unit to the right
`unit-role-left`	Clear left float
`right-to-left`	Alias for reverse-direction

Combinations

Mixed Widths

25%

75%

30%

70%

40%

60%

20%

60%

20%

Nesting

Nested Grids

Place a units-row inside any unit for complex layouts.

Quarter A

Quarter B

Half

<div class="units-row">
  <div class="unit-50">
    <div class="units-row">
      <div class="unit-50">Quarter A</div>
      <div class="unit-50">Quarter B</div>
    </div>
  </div>
  <div class="unit-50">Half</div>
</div>

Responsive

Responsive Prefixes

Override the base width at specific breakpoints. Resize your browser to see the effect.

Prefix	Breakpoint
`x-large-screen-unit-*`	≥ 1800px
`large-screen-unit-*`	≥ 1400px
`small-desktop-unit-*`	≤ 1024px
`tablet-unit-*`	≤ 767px
`large-phone-unit-*`	≤ 650px
`phone-unit-*`	≤ 480px
`forever-unit-*`	Never collapses

Sidebar (stacks on tablet)

Content (stacks on tablet)

<div class="units-row">
  <div class="unit-25 phone-unit-100">Sidebar</div>
  <div class="unit-75 phone-unit-100">Content</div>
</div>

Container

Container Queries

Container queries let units respond to their parent's width instead of the viewport. Add container-query to a parent element, then use container prefixes on units inside it.

Container Prefix	Breakpoint	Mirrors
`container-small-desktop-unit-*`	≤ 1024px	`small-desktop-unit-*`
`container-tablet-unit-*`	≤ 767px	`tablet-unit-*`
`container-large-phone-unit-*`	≤ 650px	`large-phone-unit-*`
`container-phone-unit-*`	≤ 480px	`phone-unit-*`

Resize the demo below by dragging the right edge. The columns stack when the container (not the viewport) becomes narrow.

Left — stacks at 767px container

Right — stacks at 767px container

<div class="container-query">
  <div class="units-row">
    <div class="unit-50 container-tablet-unit-100">
      Stacks when container is narrow
    </div>
    <div class="unit-50 container-tablet-unit-100">
      Stacks when container is narrow
    </div>
  </div>
</div>

Modifiers

Row & Unit Modifiers

Row Modifiers

Class	Effect
`reverse-direction`	Reverse row order
`split`	Remove gutters
`centered-content`	Center children horizontally
`stacked`	Remove bottom margin
`equal-height`	Stretch all children to same height

Reversed Row

First

Second

Third

Centered Content

Centered 30%

Split (No Gutters)

No gap

Equal Height

Short card

Taller card with more content to demonstrate how equal-height stretches siblings

Medium card

<div class="units-row equal-height">
  <div class="unit-33">Short</div>
  <div class="unit-33">Taller content here</div>
  <div class="unit-33">Medium</div>
</div>

Offsets

Push Units

Use unit-push-* to offset units with margin-left.

unit-33 push-33

unit-50 push-25

Full Width

Fill Width Container

Add fill-width to units-container for edge-to-edge layouts.

<div class="units-container fill-width">
  <div class="units-row">
    <div class="unit-100">Full browser width</div>
  </div>
</div>

Blocks

Block Layouts

Equal-width block columns using float. Simpler than the unit grid for uniform layouts.

Block

`blocks-2`	2-column layout
`blocks-3`	3-column layout
`blocks-4`	4-column layout
`blocks-5`	5-column layout
`blocks-6`	6-column layout
`block-first`	Clear float for first block in new row
`blocks-mobile-50`	2-column on mobile
`blocks-mobile-33`	3-column on mobile

<div class="blocks-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Add interactive elements with buttons, or build forms with styled inputs and validation.