I’ve been learning about creating responsive web designs in Figma and came across the concept of using an 8px vertical grid system. The idea is that all elements should have heights that are multiples of 8 pixels to maintain visual consistency and proper alignment throughout the design.
However, I’m having trouble understanding how this works in practice. When I code websites, I typically use height: auto for most elements because it makes the layout more flexible and responsive. But if I want to follow this 8px grid system, wouldn’t I need to set specific fixed heights for my elements instead?
I’m worried that using fixed heights might make my designs less responsive on different screen sizes. How do other designers handle this? Is there a way to maintain the 8px grid structure while still keeping elements flexible? Maybe I’m missing something about how this system is supposed to work in real development.
The 8px grid isn’t a hard rule - think of it more like guardrails. I’ve worked on tons of production apps and found the trick is being strategic about where you apply it. Let your text use height: auto, but design your containers with padding that hits those 8px increments. Say you’ve got a card component - give it 16px or 24px internal padding. Content grows naturally while the card keeps that grid relationship. The real magic is vertical spacing between sections. Stick to 32px, 48px, or 64px gaps. You get visual consistency without killing flexibility. Plus your responsive breakpoints scale proportionally while keeping everything looking polished and systematic.
The 8px grid makes way more sense when you see it as spacing rules, not strict height requirements. I’ve worked with tons of design systems, and the trick is nailing consistent vertical rhythm with line-height, padding, and margins that hit those 8px marks. Take text - use line-heights that create 8px multiples. So 16px text gets 24px line-height, boom, you’re aligned. Buttons, cards, form fields? Design their internal padding so everything lands on the grid with the content inside. Here’s the beauty - content flows naturally, but spaces between elements stick to 8px jumps. Your designs stay responsive since content can grow and shrink, but that visual rhythm holds steady across all screen sizes.
you dont need fixed heights! the 8px grid is all about padding, margins, and spacing - not making every height exact multiples. stick with height: auto, but let your padding/margins follow the 8px rule: 16px, 24px, 32px, etc. this keeps things responsive but still looking nice.