12-Column Grid

12 equal columns

1

1

1

1

1

1

1

1

1

1

1

1

6 + 6 split

6

6

4 + 4 + 4 thirds

4

4

4

3 + 9 sidebar layout

3 sidebar

9 main

8 + 4 content + aside

8 content

4 aside

Mixed: 2 + 3 + 7

2

3

7

Nested grid (row inside col)

4 outer

inner 6

inner 3

inner 3

Offset examples

4 offset by 2

4

3 offset by 3

6

Responsive: full → md:6 → lg:4

col-12 / md-6 / lg-4

col-12 / md-6 / lg-4

col-12 / md-6 / lg-4

col-12 / md-6 / lg-4

col-12 / md-6 / lg-4

col-12 / md-6 / lg-4

Responsive: full → sm:6 → lg:3

A

B

C

D

Offsets: pushed columns

col-4

col-4 offset-4

col-6 offset-3 (centered)

Gap variant: tight (.brut-row--tight)

4

4

4

Gap variant: loose (.brut-row--loose)

4

4

4

Gap variant: no-gutter (.brut-row--no-gutter)

4

4

4