Resources

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.

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

Grow
Grow

7 columns

58%
Grow

8 columns

66%
Grow

9 columns

75%
Grow

10 columns

83%
Grow