Grid & Breakpoints

Grid

  • the content is organized in 12 columns
  • Gutters are 3% width changing dynamically as content scales. Half a gutter 1,5% is on every side of a column
  • Left and right of the content there is a 15px fixed margin. Above 1010px breakpoint the margin gets bigger gradually until 1920px viewport width is reached. For every 1px the content gets wider the margin also gets 1px wider.
col 1
3%
col 2
col 3
col 4
col 5
col 6
col 7
col 8
col 9
col 10
col 11
col 12

Breakpoints

  • 320px and above: 1 column (minimum width)
  • 520px and above: 2 columns
  • 765px and above: 3 columns
  • 1010px to 1920px: 4 columns (dynamic instead of static margin)

Behaviour

col 12
col 4
col 4
col 4
col 9
col 4.5
col 4.5
col 3
col 3
col 3
col 3
col 3
col 3