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.
Component quality checklist
Component is not currently available in Figma.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.