UXDESIGN.CC
Figma’s new grid — you must understand CSS Grid as a designer
Figma’s new grid — you must understand CSS Grid as a designerAt Config 2025, Figma rolled out many exciting updates, including a brand-new layout grid. At first glance, it might seem like just another way to organise your designs, but there’s more to it.As a big believer in designers understanding CSS, I’ll say this: if you want to master Figma’s new Grid, you need to know how CSS Grid works. Figma’s Grid mimics CSS Grid well, but it’s not a perfect match, and that’s okay. That’s precisely why it’s so important to understand where Figma ends and the browser takes over to do the heavy lifting — so you don’t miss out on the flexibility, responsiveness, and layout power that only the browser can fully deliver.understand where Figma ends and the browser takes over to do the heavy lifting — so you don’t miss out on the flexibility, responsiveness, and layout power that only the browser can fully deliver.Understanding how CSS Grid works when using Figma’s layout grid will help you design smarter, collaborate better with developers, and build layouts that hold up in the real world.Let’s break it down — what maps over from CSS, and what doesn’t.Quick intro to Figma's new Grid featureIn May 2025, Figma introduced a major update to its layout system. Previously, designers only had access to one-dimensional Auto Layout, which operates in a single direction, similar to CSS Flexbox. Now, Figma has added a new option: Grid, enabling two-dimensional layouts much like CSS Grid. This update brings greater control and flexibility to UI design, while aligning more closely with how layouts are built in code.As shown in the updated layout menu above, Figma now offers three layout options: None (the default), Horizontal and Vertical (one-dimensional, similar to Flexbox), and the new Grid (two-dimensional, similar to CSS Grid). Understanding the difference between these layout types is essential. But let's first explore the new Grid feature:The Grid option is in the Layout section on the right-hand panel. Just turn it on to define your rows, columns, gutters, and margins. Once it’s set, drop your elements into the grid. They can span rows or columns and resize automatically as your layout shifts.✏️ Tip: In Figma, switch on Property Labels from the dropdown menu. It makes it way easier to see what each field does, especially once things start to feel a little confusing. A small toggle that saves a lot of guesswork.Why CSS Grid Matters for DesignersThe new Figma Grid is based on actual CSS code, making it a key layout method used across the web. While it’s lovely and intuitive to play with, its true power shines when you understand the code behind it. Design tools do their best, but they’ll never fully match how layouts render in the browser. Knowing CSS Grid means you can pinpoint where Figma might fall short — or even exceed expectations — and figure out when to let the browser work its magic.The way the new Figma Grid looks and works isn’t random. Like most things in Figma, it’s based on actual code — in this case, CSS Grid, a key layout method used to structure content on the web.What is CSS GridCSS Grid is a layout system that organises webpage content into rows and columns. It lets developers place items exactly where they want — be it a header at the top, a sidebar on the side, or cards arranged neatly on a page. And CSS Grid isn’t limited to full-page layouts; you can also use it for smaller areas like galleries, forms, or individual UI components. For designers, understanding CSS Grid means creating cleaner, more consistent layouts that are easier for developers to build.Think of CSS Grid Like a Bento BoxImagine your design as a bento box: you have defined sections — rows and columns — where you can slot in your “ingredients” such as text, images, and buttons. Like adjusting dividers in a bento box, CSS Grid lets you fine-tune the structure, providing flexibility and precision.Think in Grid Lines, Not ColumnsThis is where things often get lost in translation between designers and developers. As UI designers, we usually think in columns — we see a layout grid as a set of vertical tracks and place elements across those columns. But in CSS Grid, it’s all about the lines. The grid is defined by the lines that run across and down the container, creating the spaces — or cells — where content lives.A Powerful Coordinate SystemThis creates a powerful, coordinate-like system. By default, items follow the flow of the HTML, but with Grid, you can tell an element exactly where to go — for example: [grid-column-start: 2; grid-column-end: 5]. So instead of just thinking 'this spans three columns,' it becomes 'this starts at line 1 and ends at line 4' ([grid-column: 1 / 4]).t's a subtle shift, but it changes your entire approach to layout. You can place items precisely, define named grid areas, and even layer or overlap elements when needed. You also have full control over margins around the grid and the gaps between rows and columns. Clean, flexible, and simply amazing to work with once you get the hang of it.Note: If you jump to Figma dev mode ,you will be able to see notations like ([grid-column: 1 / 4])Try it out in Code (yes, especially if you are a UI Designer!)Here is a Codepen; try playing with the positioning if you want to understand this better. I have a detailed article about CSS grids (a bit older) that explains positioning in more detail.https://medium.com/media/6ce72d15bb162a331f69f78401753fb5/hrefFR or Fractional UnitsOur columns and grid cells don’t have to be the same size — we can shape them however we need. You can set fixed widths or use fr units (short for fractional units), dividing the remaining space in the grid. So if one cell is 2fr and another is 1frThe first takes up twice as much space. It’s a simple, flexible way to control layout proportions without overthinking it.Here is a little Codepen where you can play with the different units in CSS:https://medium.com/media/75b9a91e64f163426b673d21784649fc/hrefComparing CSS Grid and the New Figma Grid✅ Rows, columns, and free placement Yes! We’re finally there — CSS Grid and Figma now align beautifully, letting you place items within a coordinate-like system using grid lines.✅ Grid lines Just like CSS Grid, Figma works by defining rows and columns. Even if they’re not always shown clearly, grid lines are doing the work behind the scenes.✅ Gutters and margins The gutter (space between cells) and margin (space around the entire grid) work in Figma like in CSS. This makes keeping your layout spacing consistent between design and code easier.✅ Nesting works too Just like in CSS, you can nest layouts in Figma. That means you can place an Auto Layout inside a Grid or even a Grid inside another Grid. It gives you more flexibility to structure complex layouts while keeping everything organised and responsive.⚠️ Units In CSS Grid, you can use fixed sizes, percentages, and fractional units (fr) to divide space proportionally—like giving one column 2fr and another 1fr. Figma doesn’t support differentfr units (yet!). You can set fixed or auto sizes, but you won’t get the same flexible behaviour.⚠️ Auto height/width (for now)Unlike CSS, Figma doesn’t yet support actual auto-width or height for rows based on content. Hopefully, that’s coming soon, but keep it in mind when setting up your grid for now.This means the browser gives you more layout control than Figma. If you lock things down too much in your design and expect it to behave exactly the same in code, you might limit what CSS can do better. So leave room for flexibility and discussion, especially when handing it off to developers.And what about the “old” Auto Layout? Is that redundant now?Absolutely not! Great question. One-dimensional Auto Layout is far from redundant. It’s been our go-to tool in Figma, primarily as a Flexbox analogue. While CSS Grid and Flexbox serve different purposes — Grid is two-dimensional and Flexbox is one-dimensional — they’re designed to complement each other.Auto Layout → Mimics Flexbox (one-dimensional layout — rows or columns)Figma Grid → Mimics CSS Grid (two-dimensional layout — rows and columns)Just like CSS Grid, Flexbox is part of the CSS layout system. It’s not about one vs. the other — they’re designed to work together, each with its own strengths. The same goes for Figma Auto Layout options.Knowing both tools and when to use each is key to creating effective, responsive designs.One-dimensional vs. Two-dimensional LayoutLet’s understand how they work differently by genuinely understanding the difference between one-dimensional and two-dimensional layouts.Figma Grid and CSS Grid: Two-dimensional layoutGrid is a two-dimensional system that lets you simultaneously control layout across rows and columns. Remember how I compared CSS Grid to a bento box? There are clear sections — rows and columns — that help you organise content with precision. You’re working within a coordinate-like system, which makes it much easier to align elements, create consistent spacing, and build a strong visual rhythm.It’s especially useful for overall page structure, dashboards, cards, or any layout where you want complete control over placement in both directions.Figma Auto Layout and Flexbox: One-dimensional layoutInstead of a bento box, think of this as placing items along a string, one after the other, in a single horizontal or vertical direction. That’s what makes it a one-dimensional layout.You can enable wrapping (in both CSS and Figma), so items move to the following line when space runs out. But this wrapping happens inward, not outward — meaning the layout adapts based on the child elements' content, size, and behaviour, not the grid structure.This layout is more about flow than fixed structure. It’s ideal for elements that should respond naturally to their content, like buttons, navigation menus, tags, or stacked form fields.One dimension is great when you’re laying out items in a row or a column. If you need control in both directions at once (rows and columns), that’s when Grid is the better choice.Nesting different layout toolsBoth Figma and CSS let you nest different layout systems. You might use CSS Grid for a full-page layout and nest Flexbox within sections or vice versa. There are no hard-and-fast rules — just a matter of choosing the right tool for the job. The world is your oyster.The Overlooked Detail Every Designer Should Know: Explicit vs. Implicit GridsOne last key point: explicit versus implicit grids. In Figma, we work with explicit grids, defining every row and column. CSS Grid, however, can also create an implicit grid when you don’t determine everything, automatically generating rows or columns based on the content. This is especially useful for dynamic layouts, like blog feeds or product listings. As designers, we control the explicit grid, but understanding the implicit grid helps you know when to let the browser fill in the gaps, ensuring your designs scale and adapt in real-world use.As UI designers, the explicit approach feels natural — it’s what we see and control. But the implicit grid is quietly powerful. It steps in when content goes beyond defined, letting layouts adapt on the fly. That means your design can look perfect in Figma but behave differently in the browser because the browser is filling in the gaps for you.That’s why it’s so important to be aware of this. It’s not just about how things look — it’s about how they scale and respond in real-world use. The implicit grid can impact spacing, alignment, and overall flow in ways that aren’t always obvious until you’re in the browser.So let this be a reminder: layout isn’t just a visual task — it’s a shared space between design and development. Don’t just talk to your Figma file. Talk to your developers too. That’s when the real magic happens.There is so much more!We just scratched the surface, and if you want to dive deeper, here are some great free resources I highly recommend exploring:Why UI designers should understand Flexbox and CSS GridModern CSS Layout for UI DesignerFigma Grid Deep DiveCSS for UI Designers: Understanding Flexbox and Applying it to Figma’s Auto LayoutLayout Land by Jen SimmonsLayout & Grid in Design Systems by Brad FrostGridless Design by Donnie D’AmatoContainer Queries by Miriam SuzanneCSS SubgridsCSS Grid SpecsFlexbox SpecsLike this article?I’m always eager to hear your thoughts! Please feel free to share feedback or let me know if there’s something I should cover in more detail.Remember to subscribe on Medium and follow me on moonlearning.io, my Newsletter, Twitter, or LinkedIn for more insights on UI Design, Figma, and Code.Make sure to check out my courses, where I also offer deep dives into Layout with Figma and Code.moonlearningFigma’s new grid — you must understand CSS Grid as a designer was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.