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 %).

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

7 columns

58%

Grow

8 columns

66%

Grow

9 columns

75%

Grow

10 columns

83%

Grow

Resources

Container flex grow

Flex grow same size containers

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

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

Learn how to

Social media

Extra