Layout

Here you find an example for the layout classes.

Cells in a grid of 12

12 rows cell
6 rows cell
6 rows cell
4 rows cell
4 rows cell
4 rows cell
3 rows cell
3 rows cell
3 rows cell
3 rows cell
2 rows cell
2 rows cell
2 rows cell
2 rows cell
2 rows cell
2 rows cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell
1 row cell

Cells in different sizes

8 rows cell
4 rows cell
2 rows cell
6 rows cell
4 rows cell

Cells with margins

4 rows cell with a margin left of 1 cell
4 rows cell with a margin left of 3 cells

Without gutter

4 rows cell without gutter
4 rows cell without gutter
4 rows cell without gutter

Responsive

12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution
12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution
12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution

Fit one row

Auto size, all cells in one row
Auto size, all cells in one row
Auto size, all cells in one row
Auto size, all cells in one row
Auto size, all cells in one row

Flexible width

Auto width as wide as possible
Auto size fitting the content

Nested gutter with different values

The CSS custom property --bb-rows-gutter can be used to change the width of the gutter.

The following gutter uses --bb-rows-gutter: 15px;

6 rows

The following gutter uses --bb-rows-gutter: 25px;

4 rows
4 rows
4 rows

6 rows

The following gutter uses --bb-rows-gutter: 5px;

4 rows
4 rows
4 rows