Archives

desktop
mobile

Grid system based on 24 columns / allow to have breakpoints with 4 / 8 / 12 columns

This grid system has the following variants

The glitch is that a grid system columns can't change by breakpoint' but it can be used for 4 / 8 / 12 grid system without a problem and can be extended to supports 4k screens

  • minWidth: optional or in pixels,
  • gutter: in pixels,
  • baseFontSize: in pixels, // this allow to double the spacing * 2 on 4k screens
  • margin: in pixels,

Desktop / tablet mobile /

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

For the previous column

  • 2/24: 1/12 column on (desktop)
  • 4/24: 1/8 column on (md)
  • 4/24: 1/8 column on (sm)

For this column

  • 12/24: 6/12 column on (desktop)
  • 18/24: 6/8 column on (md)
  • 12/24: 2/4 column on (sm)
  • 18/24: 3 * /4 column on (xs) - used for the need to support smallest screen sizes

Spacing

space 1: 0.5rem baseSize:=16px
space 2: 1rem baseSize:=16px
space 3: 1.5rem baseSize:=16px
space 4: 2rem baseSize:=16px
space 5: 3rem baseSize:=16px
space 6: 4rem baseSize:=16px
space 7: 6rem baseSize:=16px
space 8: 10rem baseSize:=16px