Creating Space for an Inclusive & Accessible Lifestyle

Welcome to Sarandipity, a blog by Sara Jessick. Here, you’ll find content and a variety of resources relating to the Disability Community. Browse sensitivity-friendly recipes, disability advocacy topics and tips to help you live well.

In a World of Status-Quo’s,
Disability-Pride is a Verb of Rebellion.

Flex grow same size containers

This is the perfect solution for wrapping, because you never have to use px, it’s the same on desktop, tablet and mobile and you can even change the element gap from 20 to 30px. Your backgrounds containers should be on boxed. Values used: 1120 for ultra wide & desktop, 80% for laptop, tablet extra, tablet, mobile extra, then mobile on 90%. Make sure to add the extra responsive breakpoints otherwise it’s not as my example.

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 different size containers

This is a working solution for 12 column designs (in the 1140/1120 grid) where the containers have different widths. Also on tablet and mobile I have put everything on 100%, but you can ofcourse change this according to your design.

Creating Space for an Inclusive & Accessible Lifestyle

In a World of Status-Quo’s,Disability-Pride is a Verb of Rebellion.

Trending

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 different size containers

2 columns

15,18%

Grow

3 columns

23,66%

Grow

4 columns

32,14%

Grow

5 columns

40,63%

Grow

6 columns

Grow

Grow

7 columns

57,59%

Grow

8 columns

66,07%

Grow

9 columns

74,55%

Grow

10 columns

83,04%

Grow

In a World of Status-Quo’s,
Disability-Pride is a Verb of Rebellion.