My question is if everything is suppose to be in 4px or 8px increments does that mean even the height of sections or containers? For instance if you wanted to have a section that filled the viewport you would set that section to 100vh. However that would break the baseline grid. I'm just confused because some of the guidelines seem to be counterproductive to responsive design. For instance setting an exact container / section height would mean resizing them all at specific breakpoints.

1 Answer 1


The baseline unit is to be used as a guide wherever fixed measurements are required, still not necessarily for everything. A 100vh which will cover the entire height of the screen can still have padding on the inside of 8px or 16px as fixed measurements. Since mockup images do not give you the flexibility of testing responsive behaviour, things will be designed with baseline unit in mind (to take advantage of the grid system). However, when it comes to development, a margin of 16px may be implemented as 2% or 2vh if fluid is preferred (assuming 2% is equivalent to 16px w.r.t. mockup dimension).

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.