I recently watched a tutorial about creating responsive grids in Figma for web design. The video explained how to use vertical grids where each row is 8px tall to make vertical spacing more organized and uniform. This approach means all design components should have heights that can be divided by 8.
However, I’m getting confused about something. When I code websites, I typically use height:auto for my CSS elements because that’s supposed to be better for responsive design. But if I want to follow this 8px grid system from Figma, wouldn’t I need to give my HTML elements specific fixed heights instead?
Maybe I’m not understanding this correctly. How do you make this grid system work in actual code while still keeping things responsive? Does anyone have experience translating these Figma grids into real websites?
You’re overthinking it. The 8px grid in Figma doesn’t mean you need fixed heights in CSS - it’s just for consistent spacing and proportional relationships. I’ve used this system for two years, and here’s what actually works: keep using height:auto for containers, but apply 8px increments to padding, margins, and line-heights. When a component needs breathing room, I’ll use padding: 16px or margin-bottom: 24px instead of random values. The grid maintains visual rhythm without killing responsiveness. Your text and images still flow naturally - the spacing between elements just follows the system. It’s scaffolding for layout decisions, not rigid constraints.
You’re mixing up structural spacing with content dimensions. I had the same problem when I started working with Figma design systems. The 8px grid is mainly for spacing between elements, not the actual height of your content. I still use height:auto to let text flow naturally, but I stick to the grid with gaps, padding, and margins - always in 8px multiples. Fixed components like buttons or cards can follow the grid strictly. The trick is realizing responsive design and grid systems work together; you’re building consistent spacing while letting content expand naturally within those boundaries.