Grid Systems for UI Design

A grid system gives your layouts a consistent structural logic. Without one, spacing decisions happen on instinct — and instinct produces inconsistency across a team over time. With one, any designer on your team can build a new screen and have it feel visually consistent with everything else.

There are three types of grids you'll use in UI design. Here's how each works.

The 8pt grid

The 8pt grid means your spacing and sizing values are multiples of 8: 8, 16, 24, 32, 40, 48, 64, 80, 96. It works because most screen resolutions are divisible by 8, which means 8pt values render crisply at 1x, 2x, and 3x without subpixel rendering issues.

Some teams use a 4pt grid (4, 8, 12, 16, 20, 24...) to allow more granularity at smaller sizes. Either works — what matters is that you pick one and use it consistently.

Apply the 8pt grid to:

• Component internal spacing (padding, gaps)
• Margins between components on a page
• Touch target sizes (minimum 40-48pt, both divisible by 8)
• Icon sizes (16, 24, 32, 48)

The test: if you're typing a spacing value that isn't on your scale, stop and ask why. Usually you'll find a closer value that works.

Column grids

Column grids define the structural layout of your pages. They're different from the 8pt grid — where the 8pt grid governs micro-spacing, column grids govern macro-layout.

12-column grid for web. The 12-column system is the standard because 12 divides evenly into 2, 3, 4, and 6 columns — giving you maximum flexibility for different content widths. A typical desktop setup: 12 columns, 24px gutters (the space between columns), with a max-width container centered on the page.

Common column counts:

• Full width content: 12 columns
• Article body: 8 columns centered (columns 3-10)
• Sidebar + content: 3 columns + 9 columns
• 3-column layout: 4 columns each

4-column grid for mobile. 12 columns is too granular for small screens. Switch to a 4-column grid at mobile breakpoints (320-767px), with 16px gutters and 16px margins on each side.

At the tablet breakpoint (768-1024px), you can use either 8 or 12 columns depending on how complex your layout is at that size.

Baseline grids

A baseline grid controls vertical typography spacing — it's the horizontal lines that text sits on. If all your text follows the same baseline grid, different text styles align naturally when placed next to each other.

A common baseline value is 8px (matching the 8pt spacing system). All line-heights in your type scale should be multiples of 8: a 16px body font has a 24px line-height, a 24px heading has a 32px line-height.

In practice, baseline grids are more important for print and editorial design than for most UI. For UI, making line-heights multiples of your base unit is usually sufficient. Pure baseline grid adherence across complex UI is difficult to maintain and rarely the difference between good and mediocre layout.

Setting up grids in Figma

In Figma, grids are applied to frames via the Design panel.

To add a column grid:

1. Select a frame
2. In the Design panel, click "+" next to "Layout grid"
3. Change the grid type to "Columns"
4. Set Count (12 for desktop), Type (Stretch), Gutter (24), and Margin (if needed)

To save a grid as a reusable style:

1. Set up the grid as described above
2. Click the four-dot icon next to "Layout grid" in the Design panel
3. Choose "Create style"
4. Name it (e.g., "Grid/Desktop/12-col" or "Grid/Mobile/4-col")

Now you can apply your saved grid to any frame from the style picker. This is essential for team consistency — everyone uses the same defined grid, not individual interpretations of it.

Try Figma Free

Using grids with auto layout

Column grids and auto layout work together. Auto layout handles spacing within components; the column grid handles placement of components on the page.

In practice:

• Use auto layout to build a card component with internal padding and spacing
• Use column grid frames to place those cards in a 3-column or 4-column layout
• Let the column grid define the width constraints; let auto layout handle the internal sizing

For responsive design, set up separate grid styles for each breakpoint (desktop, tablet, mobile) and switch between them as you design at different viewport sizes. Frame your mobile screens at 390px (iPhone 14 width) and apply the mobile 4-column grid.

Common layout patterns

Sidebar + content (e.g., app navigation): 2–3 columns for the sidebar, 9–10 columns for the main content area. The sidebar width is often fixed in pixels; the content area grows.

Dashboard (e.g., metrics grid): content that spans 12, 6, 4, or 3 columns depending on the importance and width of each widget. Use consistent card heights to avoid visual chaos.

Article/documentation (e.g., blog or docs): a centered column of 6–8 columns for the body text, constrained max-width (around 680px) for readability. Side margins give room for callouts or a table of contents.

Grids don't need to be visible in your final designs — they're scaffolding. The grid does its job when layouts feel ordered without you consciously noticing the structure.