Grid

Box auto width

Add ilimited boxes. It will wrap when the row width is 100%.

Only 12 boxes. Simulating the .box-1 class:

12 boxes with .box-1 class:
6 boxes with .box-2 class:
4 boxes with .box-3 class:
3 boxes with .box-4 class:
2 boxes with .box-6 class:
1 box with .box-12 class:

Nested

One row with boxes and columns side by side. The columns with boxes and rows.

One column with boxes and rows side by side. The rows with boxes and columns.

Box Align

Align Content

.align-content-start

.align-content-end

.align-content-center

.align-content-stretch

.align-content-space-between

.align-content-space-around

Align Items

.align-items-start

.align-items-end

.align-items-center

.align-items-baseline

.align-items-stretch

Justify Content

.justify-content-start

.justify-content-center

.justify-content-end

.justify-content-space-between

.justify-content-space-around