Figma Auto Layout to CSS Grid: A Practical Guide

TL;DR

Auto layout maps to flex for one-dimensional flow and to grid for two-dimensional layouts.
Define rows/columns in Figma before export; messy layers produce messy grid.
Validate output against your Tailwind spacing scale and breakpoints.

Why Grid is the right target for some auto layouts

Auto layout is linear by default, but when cards wrap, mixed widths appear, or content needs both row and column alignment, CSS Grid is a better target.

Choose grid when you need

Two-dimensional placement (rows and columns).
Consistent alignment across varied content heights.
Explicit control of gaps on both axes.

Choose flex when you need

Simple horizontal or vertical flow.
Content-driven sizing without strict rows.
Minimal layout rules with smaller CSS.

Mapping auto layout to CSS Grid

The goal is to translate intent, not every pixel. Use this mapping as a starting point:

Figma concept	CSS Grid intent	Notes
Direction: Horizontal	`grid-auto-flow: column` or defined columns	Use explicit columns for stable layouts
Direction: Vertical	`grid-auto-flow: row`	Often becomes a single-column grid
Spacing between items	`gap`	Use `gap-x`/`gap-y` for axis-specific spacing
Padding	`padding`	Mirror container padding in CSS
Alignment	`align-items` / `justify-items`	Set on grid container
Stretch / Fill	`fr` units	Use `minmax()` for responsive columns

Step-by-step workflow

Group layers by row/column in Figma.
Rename frames/components so exported classes are meaningful.
Decide grid columns (e.g., 2, 3, 4) and breakpoint rules.
Export and map gaps to your spacing tokens.
Refine responsiveness using minmax() or breakpoint classes.

Tailwind mapping tips

Start with grid + gap-*.
Use grid-cols-* for fixed columns, or grid-cols-[repeat(auto-fit,minmax(240px,1fr))] for fluid layouts.
Keep spacing aligned to your config (gap-4, gap-6, etc.).

Responsive strategy

Mobile first: start with one column, then increase columns at md/lg.
Content-aware columns: use auto-fit with minmax to avoid awkward gaps.
Overflow checks: validate long titles or variable content heights.

Common pitfalls

Over-nesting frames, which creates unnecessary grid wrappers.
Ignoring intrinsic size; text-heavy cards need taller rows.
Mismatched tokens; exported spacing that is not in your Tailwind scale.

Checklist before you ship

Grid aligns with your design system spacing.
Breakpoints match your product layout rules.
Components remain reusable outside the grid context.

FAQ

Can I convert every auto layout to grid?
Use grid only when you need two-dimensional control; otherwise flex is simpler and smaller.

Do I need a plugin?
No, but good export tooling saves time. See the Figma to Code Converter for options.

How do I avoid layout shifts?
Set predictable column widths and test with real content.

Recommended tools

Compare exporters and grid support on the comparison page.

Next steps

Explore the Figma to Code hub.
Review responsive export tips in the comparison guide.