Skip to content

psd grid for unsemantic

MediaFuse edited this page Jul 18, 2018 · 6 revisions

Download from here:

A simple break down of it's usage, for dummies - such as myself.

Conversion - Percentage to pixels:

75 % = 75 / 5 * 60 = 900 , 900px - 20px gutter (i.e 10px on each side) = 880px
45% = 45% / 5 * 60 = 540 , 540px - 20px gutter (i.e 10px on each side) = 520px

Conversion - Pixels to percentage:

Additions are made in 60px (i.e 40px + 20px (10px on each side))

Examples include 75% (880px), 45% (520px), 35% (400px)

280px = 280 + 20px (gutter) / 60 * 5 = 25%
700px = 700 + 20px (gutter) / 60 * 5 = 60%

Clone this wiki locally