Flexbox 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.

Offset a column to the right side of the container using a class modifier. These classes are stackable to create dynamic responsive behavior.

The auto-width grid lets you add any number of auto sizing columns to a row and the grid will figure it out.

Nest grids inside grids inside grids. Simply add a new row inside of a grid and repeat as many times as needed.

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.

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.

Insert a row break to separate content in two rows that, combined, do not reach the full width of the grid.

Use Flexbox classes to reorder or reverse elements in a grid without altering their structure in the code.