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