Anchor Design System
Visit Repo

Grid

A responsive flexbox-based grid system.

Breakpoints

Breakpoints enable responsive modifiers and helpers throughout the design system and make up the core foundation of the grid system.

Description Token Value

Breakpoint: mobile

Smallest breakpoint minimum width starting at 0px.
var(--token-size-breakpoint-mobile)
$token-size-breakpoint-mobile
 0

Breakpoint: tablet

Tablet sizing starts at 768px min-width.
var(--token-size-breakpoint-tablet)
$token-size-breakpoint-tablet
 48rem

Breakpoint: desktop

Desktop sizing starts at 1024px min-width.
var(--token-size-breakpoint-desktop)
$token-size-breakpoint-desktop
 64rem

Breakpoint: widescreen

Widescreen desktop sizing starts at 1280px min-width.
var(--token-size-breakpoint-widescreen)
$token-size-breakpoint-widescreen
 80rem

Breakpoint: extrawide

Extrawide desktop sizing starts at 1440px min-width.
var(--token-size-breakpoint-extrawide)
$token-size-breakpoint-extrawide
 90rem

Responsive

Responsive modifiers enable different column sizes, offsets, and alignment at multiple breakpoints.

 View Code

Offset

Enable columns to be offset by desired number of columns.

 View Code

Auto Width

Auto sizing of columns in a single row.

 View Code

Alignment Utilities

Flex alignment utilities can also be used to align grid columns. Responsive alignment utilities are also supported so you can change the alignment for different devices.

Justify Start

Justify Center

Justify End

Align Center

 View Code

Distribution Utilities

Flex distribution utilities can also be used to distirbute grid columns.

Space Around

Space Between

 View Code

Column Ordering

Optional classes to change the order of columns.

Reverse Order

1
2
3

Responsive Ordering

1
2
 View Code

Row & Column Collapse

Optional classes to collapse rows and columns.

1
2
3
 View Code