Columns

Columns are used to create a responsive grid system.

alignItems prop is used to align columns vertically. It can be set to start, center or end. alignSelf prop is used to align columns vertically. It can be set to start, center or end. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Breaking columns to a new line in flexbox requires a small hack: add an element with w-100 property wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple rows, but not every implementation method can account for this.
You may also apply this break at specific breakpoints. Use order prop to change the order of your content. Values are '1' | '2' | '3' | '4' | '5' | 'first' | 'last'.