Switch to M&T
DesignDevelop
Version 4.5.1
This page's guidelines are under construction. For questions on this component's use, please reach out to the Currency team.
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
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.
Variants
  • l-flex-col--xs-1
  • l-flex-col--xs-2
  • l-flex-col--xs-3
  • l-flex-col--xs-4
<div class="l-flex-row">
  <div class="l-flex-col--xs-12">
    Content
  </div>
</div>
Copy
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. There is also available classes that will offset a column as far to the right as possible in addition to one that will offset all columns after it as far to the right as possible.
<div class="l-flex-row">
  <div class="l-flex-col--xs-offset-3 l-flex-col--xs-9">
    Content
  </div>
</div>
Copy
col
col
col
col
col
Auto Width
Add any number of auto sizing columns to a row. Let the grid figure it out.
<div class="l-flex-row">
  <div class="l-flex-col--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy
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.
<div class="l-flex-row">
  <div class="l-flex-col--xs">
    <div class="l-flex-row">
      <div class="l-flex-col--xs">
        Content
      </div>
      <div class="l-flex-col--xs">
        Content
      </div>
    </div>
  </div>
</div>
Copy
.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.
<div class="l-flex-row l-flex-center--xs">
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy
.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.
<div class="l-flex-row l-flex-around--xs">
  <div class="l-flex-col--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy
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.
<div class="l-flex-row">
  <div class="l-flex-col--xs-7">
    Content
  </div>
  <div class="l-flex-row--break"></div>
  <div class="l-flex-col--xs-4">
    Content broken to next line
  </div>
</div>
Copy
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.
<div class="l-flex-row">
  <div class="l-flex-col--xs l-flex-last--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy