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
1
2
3
4
5
6
7
8
9
10
11
5 columns on Desktop
1
2
3
4
5
6
7
8
9
4 columns on Desktop
1
2
3
4
5
6
7
3 columns on Desktop
1
2
3
4
5
2 columns on Desktop
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