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.

closed as off-topic by Mayo, Ken Mohnkern, locationunknown, Shreyas Tripathy, JonW Jun 17 at 9:06

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Mayo, Ken Mohnkern, Shreyas Tripathy, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.


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.