CONTAINER FLEX GROW
FLEX GROW SAME SIZE CONTAINERS
This is the perfect solution for wrapping for % and px, because of the grow features they can scale down and up. And even if you want to use the default 1140/1120 grid then it Works.
6 columns on Desktop
- 13.5 %
- 25 %
- 35 %
1
2
3
4
5
6
7
8
9
10
11
5 columns on Desktop
- 16.5 %
- 25 %
- 35 %
1
2
3
4
5
6
7
8
9
4 columns on Desktop
- 20 %
- 35 %
- 100 %
1
2
3
4
5
6
7
3 columns on Desktop
- 25 %
- 35 %
- 100 %
1
2
3
4
5
2 columns on Desktop
- 35 %
- 100 %
- 100 %
1
2
3
FLEX GROW BASED ON THE 12 COLUMN GRID
This is a working solution for 12 column designs (in the 1140/1120 grid). So if in your design an element takes up 4 columns then it should be 32%. The other one grows automatically making it easy to make layouts on multiple rows.