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
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.
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="1~12" . Specify a numbered prop when you need a
particularly sized column; otherwise, feel free to stick to
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
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
columns within an existing
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).