Use Column to implement a 12-column system.


Component props
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

The number of units in a 12-unit width that this element will occupy.

Also available in responsive sizes: smSpan, mdSpan, lgSpan


Static columns

Column is a basic layout component to help you size your UI. A full width is composed
of 12 units, each equal to 1/12 of the total width. By setting the span prop you
dictate the percent width an element can occupy.

Example: Basic Column Unit

Example: Three Equal Columns

Example: Two Equal Columns

Example: Two Unequal Columns

Responsive columns

Column supports setting a span at our 3 responsive breakpoints: sm, md, lg. Each
sets the span of the column from that breakpoint and up. If you don't want your
column to be responsive, only set the span prop.

Example: Stacking Columns

Example: Resizing Columns

Example: Equal height columns

Unlike traditional CSS columns, using flex columns makes each column equal height by default.

Example: Gutters

Column gutters can be created through composition and negative margins.