8 device presets
Desktop 1440, Bootstrap 5, Tailwind, Laptop, Tablet, two mobile sizes and your own custom grid.
☕ Support ProFigma
Did this tool save you time? Buy me a coffee.
Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.
- Keeps every tool free
- Funds new tools & features
- Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How to Use the UI Grid Maker
Choose a device preset
Start from Desktop 1440, Bootstrap, Tailwind, Laptop, Tablet or Mobile. Every preset uses proven column, gutter and margin values.
Fine-tune the grid
Adjust columns, gutter and margin with the steppers. The preview and column width update instantly, and fractional pixels get a one-click fix.
Export to Figma or code
Copy the grid as SVG for Figma, copy CSS Grid or Tailwind classes, or save a PNG for your design documentation.
A Grid Calculator Built for Designers
Plan the layout once with the UI grid maker, then use the same numbers in Figma, CSS and Tailwind. No plugin, no signup.
Whole-pixel fixer
Fractional column widths get flagged with one-click fixes, such as a slightly smaller margin, for crisp edges.
Figma grid export
Copy the grid as SVG and paste it into Figma, or read the exact Layout grid values to type in.
CSS grid generator
Ready-to-paste CSS Grid, Tailwind classes and CSS variables, with mobile and tablet media queries.
Column span table
See the exact width of 1 to 12 columns for cards, sidebars and images, gutters included.
8pt baseline grid
Turn on a baseline overlay for vertical rhythm, and share any grid with a single link.
Who Uses a Layout Grid Generator?
UI/UX designers
Set up Figma frames with a clean grid before the first wireframe, on every breakpoint.
Front-end developers
Turn the designer's grid into CSS Grid or Tailwind without guessing the numbers.
Design system teams
Document one grid spec for every product, and share it with a link and a PNG.
Students
Learn how columns, gutters and margins work together by watching the preview change.
What Is a UI Grid Maker?
A UI grid maker is a tool that plans the invisible columns a layout sits on. You choose the frame width, the number of columns, the gutter between them and the margin at the edges, and it calculates the column width for you.
A good grid keeps cards, images and text aligned on every page, so designs feel calm and consistent. It also gives designers and developers one shared set of numbers, instead of guessing in Figma and again in code.
How to Calculate Column Width
Every grid calculator uses the same simple formula for a stretch grid:
column = (width − 2 × margin − (columns − 1) × gutter) ÷ columns
For the default desktop preset that is (1440 − 120 − 264) ÷ 12 = 88 px per column, with a content width of 1320 px. A center grid works the other way round: you fix the column width and the margins become whatever space is left.
Popular Grid Systems at a Glance
| Preset | Width | Columns | Gutter | Margin | Column |
|---|---|---|---|---|---|
| Desktop | 1440 | 12 | 24 | 60 | 88 px |
| Bootstrap 5 | 1320 | 12 | 24 | 12 | 86 px |
| Tailwind | 1280 | 12 | 32 | 32 | 72 px |
| Laptop | 1024 | 12 | 20 | 37 | 60.83 px |
| Tablet | 768 | 8 | 16 | 24 | 76 px |
| Mobile Large | 428 | 4 | 16 | 16 | 87 px |
| Mobile | 375 | 4 | 15 | 21 | 72 px |
Most web layouts use 12 columns on desktop because 12 divides evenly into halves, thirds and quarters. Tablets usually drop to 8 columns and phones to 4. Every row in this table is a one-click preset in the UI grid maker.
Why Whole Pixels Matter
Change the desktop margin to 80 px and each column becomes 84.67 px. Fractional widths make edges land between screen pixels, so borders look blurry and elements drift by a pixel from design to code.
The UI grid maker flags this straight away and suggests the nearest fix. In this case, a margin of 78 px gives clean 85 px columns. The Laptop preset above is a good example to try.
Pro tip: Keep gutters and margins on an 8-point scale (8, 16, 24, 32…) and pair them with an 8 px baseline. Spacing then feels consistent in both directions.
From Figma Layout Grid to CSS
Figma grid
In Figma, select a frame and add a Layout grid with the Columns type. Enter the count, margin and gutter from the Figma tab, or paste the copied SVG as a guide layer. Figma explains the options in its layout grids guide.
CSS Grid and Tailwind
In code, the same grid is a container with padding for the margin and grid-template-columns: repeat(12, minmax(0, 1fr)) with a column gap for the gutter. The W3C CSS Grid specification and MDN's CSS grid layout guide cover every property. The CSS grid generator above writes this code, including media queries for mobile and tablet, and Tailwind classes if you prefer utilities.
Building the rest of your design system? Check text and background colors with the WCAG color contrast checker, and fix headline capitalization with the case converter.
Save this page and use the ProFigma UI grid maker for every new project: free, private and ready for Figma and code.
Frequently Asked Questions
What is the best grid for a 1440px design?
A 12-column grid with a 24 px gutter and 60 px margins is a popular choice. It gives 88 px columns and a 1320 px content area, which works well for most websites.
How do I calculate column width?
Subtract both margins and all gutters from the frame width, then divide by the number of columns. The UI grid maker does this for you and shows the result instantly.
What is the difference between a gutter and a margin?
A gutter is the space between two columns. A margin is the space between the outer columns and the edge of the frame.
Why should column widths be whole pixels?
Fractional widths such as 84.67 px place edges between screen pixels, which makes borders blurry and causes small differences between design and code.
How many columns should a mobile grid have?
Most mobile layouts use 4 columns with 16 px gutters and margins. Tablets usually use 8 columns and desktops 12.
How do I add this grid to Figma?
Click Copy Figma (SVG) and paste into your frame, or open the Figma tab and type the count, margin and gutter into the frame's Layout grid settings.
Does it work with Tailwind CSS?
Yes. The Tailwind tab gives ready-to-use classes with arbitrary values for gutters and margins, including responsive prefixes for tablet and desktop.
Is the UI grid maker free?
Yes. It is 100% free with no signup, and everything runs in your browser. Your settings are saved on your device and can be shared with a link.
More free tools
QR Code Generator
Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.
Case Converter
Switch text between 15+ cases in one click.
Image Compressor
Shrink photos up to 90% right in your browser.
Contrast Checker
WCAG 2.2 AA and AAA checks for any colour pair.
PNG to JPG Converter
Bulk convert images in three steps.
FAQ
Frequently asked questions
What does a UI grid maker do?
It calculates a layout grid from the frame width, number of columns, gutter and margin. You see the column width and a live preview, then copy the values into Figma or code, so designers and developers use identical numbers.
How do I get the grid into Figma?
Use Copy Figma (SVG) and paste the grid onto your canvas, or read the exact layout grid values shown and type them into Figma's Layout grid panel. Both approaches give you the same columns, gutters and margins.
Can it export CSS Grid and Tailwind code?
Yes. The export tab gives ready-to-paste CSS Grid, Tailwind classes and CSS variables. Turn on the responsive option to add mobile and tablet grids with media queries for your breakpoints.
Why does the tool warn about fractional pixels?
When column width is not a whole number, edges can look blurry on screen. The tool flags this and offers one-click fixes, such as a slightly smaller margin, so your columns land on whole pixels.
Which presets are included?
Eight device presets: Desktop 1440, Bootstrap 5, Tailwind, Laptop, Tablet, two mobile sizes and a custom grid. You can also show a baseline grid, such as 8 px, and share a grid through a link.