Column flex values should total 10 to fit on row.

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

3

2

2

3

4

2

2

2

5

5

6

4

7

3

8

2

9

1

10

Grid with flex wrap

1

1

1

4

5

3

1

1

The above grid has a total flex value of 20 so it wraps onto the another row.

Equal Height Columns

3

All three columns will become taller when any one of them has more content than the others

All three columns will become taller when any one of them has more content than the others

All three columns will become taller when any one of them has more content than the others

2

All three columns will become taller when any one of them has more content than the others

All three columns will become taller when any one of them has more content than the others

5

All three columns will become taller when any one of them has more content than the others

Multples of 6 with 5px gutter

2

2

2

1

1

1

1

1

1

3

1

2

Centered Grids

Centered: 8

Centered: 6

Centered: 3

Centered: 4

Centered: 4

Centered: 3

Centered: 2

Centered: 2

Centered: 3

Fixed Width Columns

Fixed Width Column

Dynamic Width Column

Dynamic Width Column

Fixed Width Column