Grid Example

.grid__item (only)

.grid__item (only)
.grid__item (only)

.grid__item--2

.grid__item--2
.grid__item--2

.grid__item--3

.grid__item--3
.grid__item--3
.grid__item--3

.grid__item--3 + grid__item--break-to-half

.grid__item--3
.grid__item--3
.grid__item--3

.grid__item--3-alt

Retire this as the grid__item--break-to-half can be used more flexibly.
.grid__item--3-alt
.grid__item--3-alt
.grid__item--3-alt

.grid__item--3-2 + .grid__item--3

.grid__item--3-2
.grid__item--3

.grid__item--3-2 + .grid__item--3 + grid__item--break-to-half

.grid__item--3-2
.grid__item--3

.grid__item--3-2 + .grid__item--3-alt

.grid__item--3-2
.grid__item--3-alt

.grid__item--4

.grid__item--4
.grid__item--4
.grid__item--4
.grid__item--4

.grid__item--4 (many)

1) .grid__item--4
2).grid__item--4
3).grid__item--4
4).grid__item--4
5).grid__item--4
6).grid__item--4
7).grid__item--4
8).grid__item--4
9).grid__item--4
10).grid__item--4
11).grid__item--4
12).grid__item--4
13).grid__item--4
14).grid__item--4
15).grid__item--4
16).grid__item--4

.grid__item--5

.grid__item--5
.grid__item--5
.grid__item--5
.grid__item--5
.grid__item--5

.grid__item--5 + grid__item--break-to-half

.grid__item--5
.grid__item--5
.grid__item--5
.grid__item--5
.grid__item--5

.grid__item--5 (many)

1).grid__item--5
2).grid__item--5
3).grid__item--5
4).grid__item--5
5).grid__item--5
6).grid__item--5
7).grid__item--5
8).grid__item--5
9).grid__item--5
10).grid__item--5
11).grid__item--5
12).grid__item--5
13).grid__item--5
14).grid__item--5
15).grid__item--5

.grid__item--5 (many) + grid__item--break-to-half

1).grid__item--5
2).grid__item--5
3).grid__item--5
4).grid__item--5
5).grid__item--5
6).grid__item--5
7).grid__item--5
8).grid__item--5
9).grid__item--5
10).grid__item--5
11).grid__item--5
12).grid__item--5
13).grid__item--5
14).grid__item--5
15).grid__item--5