Grid is used to create a responsive grid system.
col
property is used to set the column size. colSm="6"
. For example, here are two grid layouts that apply to every device and viewport, from xs to
xxl. Add any number of unit-less col
for each breakpoint you need and every column
will be the same width. colXs="auto"
, colSm="auto"
, colMd="auto"
, colLg="auto"
, colXl="auto"
, or colXxl="auto"
classes to size columns based on the natural width of their content. col
and col="1~12"
. Specify a numbered prop when you need a
particularly sized column; otherwise, feel free to stick to col
. colSm="1~12"
, you can create a basic grid system that starts
out stacked and becomes horizontal at the small breakpoint (sm). col
prop for each tier as needed. See the example below
for a better idea of how it all works. rowCols
properties to quickly set the number of columns that
best render your content and layout. Whereas normal col="1~12"
classes apply to
the individual columns (e.g., colmd="4"
), the row columns classes are set on the parent row
as a
shortcut. With rowCols="auto"
you can give the columns their natural width. Use these row columns
classes to quickly create basic grid layouts or to control your card layouts. row
and set of colSm="1~12"
columns within an existing colSm="1~12"
column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required
that you use all 12 available columns).