Auto columns
When there are no classes on the grid items (the immediate children of a.grid), each grid item will automatically be sized to one column.
.g-col-6
.g-col-6
.g-col-6
.g-col-6
This behavior can be mixed with grid column classes.
.g-col-6
1
1
1
1
1
1
Columns and gaps
.g-col-2
.g-col-2
.g-col-6
.g-col-4
starts
.g-col-3 .g-start-2
.g-col-4 .g-start-6
Responsive
.g-col-md-4
.g-col-md-4
.g-col-md-4
Compare that to this two column layout at all viewports.
.g-col-6
.g-col-6
Gaps
Change the vertical gaps only by modifying the rowGap. Note that we use gap on.grids, but rowGap and column-gapcan be modified as needed.
.g-col-6
.g-col-6
.g-col-6
.g-col-6
Because of that, you can have different vertical and horizontal gaps, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for gap, or with our --bs-gap CSS variable.
.g-col-6
.g-col-6
.g-col-6
.g-col-6
No grid classes
Auto-column
Auto-column
Auto-column
Three columns
.g-col-4
.g-col-4
.g-col-4
Nesting
First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column
Customizing
| Variable | Fallback value | Description |
|---|---|---|
--bs-rows | 1 | The number of rows in your grid template |
--bs-columns | 12 | The number of columns in your grid template |
--bs-gap | 1.5rem | The size of the gap between columns (vertical and horizontal) |
Wrapping
.g-col-6
.g-col-6
.g-col-6
.g-col-6
Adding rows
Auto-column
Auto-column
Auto-column