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
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
Example: Stacking Columns
Example: Resizing Columns
Example: Equal height columns
Unlike traditional CSS columns, using flex columns makes each column equal height by default.
Column gutters can be created through composition and negative margins.