LOADING...
Making things better ...

Grid layout

I like 12 grid layout. It is the lowest number that has maximum number of natural delimiters.
It's 1, 2, 3, 4, 6 and 12 so each element will fit into grid nicely.
It's easy to design, it's close to golden ratio, 3/2 it's one of the Fibonacci ratio numbers.

Using pre-defined delimiters we will be able to align content horizontally into specific lines without having a hell with custom sizing. 

As for vertical positioning we expect something equal to the line height and of course it should be equal to horizontal positioning to have the same space between elements horizontally and vertically.

Some elements should be emphasized with an extra space around them and visually it looks better when we use a base number with pre-defined delimiter cuz it's unperceived expected behavior.

For example screen width is 1200px, font size is 16px, margins between elements is equal to 1-2 x font size which we call rem, about 24-32px will take page scroller bar (depends on browser, device and styling).

So the browser window width 1168px and we'd like to have some margins around the container equal to the font size: 16px at the left and 16px at the right = 32px which means container size at the specified screen should be 1136 px.