How to implement 8px vertical grid system in Figma without breaking responsive design

[Liam_25Meditation]

I recently learned about using an 8px vertical grid system in Figma for better design consistency. The idea is that all elements should have heights that are multiples of 8 pixels to create better vertical rhythm and alignment.

However, I’m struggling to understand how this works with responsive web development. In CSS, I typically use height: auto on my elements because it allows content to flow naturally and maintains responsiveness across different screen sizes.

If I follow the 8px grid system strictly, wouldn’t I need to set fixed pixel heights on my elements? This seems to go against responsive design principles. How do other designers handle this contradiction? Is there a way to maintain the benefits of the 8px grid while keeping elements flexible and responsive?

[Sophia63]

you dont have to stick to 8px for everything! i mostly use it for spacing and layout stuff, like margins and paddings. keep text blocks as auto height tho, that keeps things flexible. it’s all about looking nice without losing the responsive feel!