Resources
Container flex grow
Flex grow same size containers
Using the following numbers when using wrapping & grow will make containers and widgets scale beautifully on desktop, tablet and mobile. Works with any boxed container width (like 1140 or 1120 px or even %).
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.
2 columns
15%
Grow
3 columns
24%
Grow
4 columns
32%
Grow
5 columns
41%
Grow
6 columns
49%
Grow
7 columns
58%
Grow
8 columns
66%
Grow
9 columns
75%
Grow
10 columns
83%
Grow