Grid is used to create a responsive grid system.
col property is used to set the column size.
Utilize breakpoint-specific column props for easy column sizing without an explicit numbered
like 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.
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. Note that the other columns will resize no matter the width of the center column.
Use 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.
For grids that are the same from the smallest of devices to the largest, use the
col and col="1~12" . Specify a numbered prop when you need a
particularly sized column; otherwise, feel free to stick to col.
Using a single set colSm="1~12", you can create a basic grid system that starts
out stacked and becomes horizontal at the small breakpoint (sm).
Use a combination of different col prop for each tier as needed. See the example below
for a better idea of how it all works.
Use the responsive 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.
To nest your content with the default grid, add a new 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).