I watched a tutorial about creating responsive grids in Figma and I’m confused about something. The video explained using vertical grids where each row is 8px tall to keep everything aligned properly. This means all your design elements should have heights that can be divided by 8.
But here’s what I don’t understand. I always use height auto on my elements because that’s supposed to be better for responsive design. If I want to follow this 8px grid system, does that mean I have to give everything fixed heights instead? That seems like it would make things less responsive.
Maybe I’m missing something obvious here. How do you balance using these structured vertical grids with keeping your design flexible for different screen sizes? I want my designs to look consistent but I also don’t want to break responsiveness by setting rigid heights everywhere.
Don’t think of the 8px grid as a constraint - it’s just your foundation. I’ve been using this system for years, and here’s what works: set up your design tokens to match the grid, but let your components breathe. Auto-height is totally fine. Just make sure your spacing values stick to the grid. Say you’ve got a card that grows with content - use 16px internal padding and 32px gaps between cards. Both follow the grid, but the card expands naturally. The grid becomes invisible scaffolding that keeps everything consistent across breakpoints. When stuff resizes on mobile, it still follows the same spacing rhythm from desktop. This actually makes responsiveness better because your spacing stays proportional.
Grid systems aren’t about controlling element sizes - they’re about vertical rhythm. I use the 8px baseline for typography and spacing between containers. Keep your text components auto-height, just make sure line-heights hit grid multipliers. Like 16px font with 24px line-height (3x8px). Paragraphs expand naturally but stay visually consistent. The real trick is grid-based spacing between sections. Your hero can be auto-height, but throw 48px or 64px margin below it to stay aligned. You get flexibility and structure without breaking responsive design.
The 8px grid doesn’t mean everything needs fixed heights - that’s a common mistake. It’s really about keeping your spacing consistent. Use the grid for margins, padding, and spacing between components, not for locking down text blocks or content areas. You can totally use auto height for text while making sure the spacing around it follows 8px increments. Like, a card with auto-height text could have 16px padding and 24px margin below - both multiples of 8. Just focus on applying the grid to your spacing tokens and component padding. You’ll get visual consistency without breaking responsiveness.
Don’t think of the 8px grid as strict rules for element heights - it’s more like a guidance system. I made that same mistake when I started, assuming everything needed fixed dimensions. What actually works is applying the grid to your baseline spacing and letting content determine the heights naturally. Say you’ve got a button with auto-height text - just make sure the padding inside uses 8px increments like 12px or 16px. Same with line heights - stick to values that align with your grid like 24px or 32px. Here’s the key: responsive elements can expand naturally while keeping that underlying rhythm. Your text blocks grow and shrink with content, but the structural spacing between sections stays consistent with the grid.
you’re overthinking it. the 8px grid creates visual harmony - it doesn’t mean everything needs rigid heights. keep using auto heights but pay attention to how things stack. if one section ends at 120px and the next has 16px margin, you’re still on grid even with flexible elements. works perfectly without breaking responsiveness.