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