Css Grid

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 row-gap. Note that we use gap on .grids, but row-gap 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