Switch to Wilmington
Overview

Flexbox Grid

Currency uses the Flexbox Grid framework for easy distribution of items within a layout. Grids can be nested for alignment on multiple levels. They can also be made responsive by allowing multiple sizes on one element.

12
4
8
6
6
Responsive Grid
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. These classes are stackable to create dynamic responsive behavior. If the smallest viewport chosen isn't reached (ex: no viewport smaller than md is present but the screen is smaller than the md viewport), the content will fill the full 12 columns.
8
6
3
Offsets
Offset a column to the right side of the container using a class modifier. These classes are stackable to create dynamic responsive behavior.
col
col
col
col
col
Auto Width
The auto-width grid lets you add any number of auto sizing columns to a row and the grid will figure it out.
col
col
col
col
col
col
col
Nesting
Nest grids inside grids inside grids. Simply add a new row inside of a grid and repeat as many times as needed.
.l-flex-start--*
.l-flex-center--*
.l-flex-end--*
.l-flex-top--*
.l-flex-middle--*
.l-flex-bottom--*
Alignment
Add classes to elements to align children to the start or end of a row, as well as the top, bottom, or center of a column.
.l-flex-around-*
.l-flex-around-*
.l-flex-between-*
.l-flex-between-*
Distribution
These classes will distribute space as directed around items within the grid. Use .around to move space evenly around an element within a grid and .between to move space between elements within a grid.
Row 1
Row 2
Row Breaks
Insert a row break to separate content in two rows that, combined, do not reach the full width of the grid.
1
2
.l-flex-first--*
2
3
.l-flex-last--*
.l-flex-column--reverse
1
2
3
Reordering
Use Flexbox classes to reorder or reverse elements in a grid without altering their structure in the code.