What does a CSS Grid generator do?
Builds grid-template-columns, rows, gap, and areas visually, previews the layout live, and copies CSS, Tailwind, or React code—no manual track typing required.
Generated CSS reflects your track and gap settings. Test in target browsers and design systems—arbitrary Tailwind classes require Tailwind v3+.
Skip to grid builderPick a layout preset, preview it live, and copy production-ready CSS in seconds—no signup, runs in your browser.
Loading tool…
A CSS Grid generator lets you build grid-template-columns, rows, gap, and named areas visually, then copy matching CSS, Tailwind, or React code—free in your browser, no signup.
CSS Grid is the standard way to lay out pages in two dimensions—rows and columns together. A grid generator removes the trial-and-error of hand-writing track lists and lets you preview layouts before pasting code into your project.
EverydayTools provides presets for dashboards, sidebars, galleries, and marketing pages. Tune columns, rows, and gap, drag track handles on the live preview, enable template areas, and export production CSS with optional @media breakpoint overrides. Shareable URLs and local save restore your work.
Processing runs entirely in your browser—layout values are not uploaded to EverydayTools servers.
Pick a preset → adjust gap → Copy CSS. Open Advanced options for tracks, areas, breakpoints, and import.
Concise answers for common searches — definitions, steps, and comparisons.
Builds grid-template-columns, rows, gap, and areas visually, previews the layout live, and copies CSS, Tailwind, or React code—no manual track typing required.
1fr is one fraction of free space. Three columns of 1fr 1fr 1fr split width equally. Mix 250px 1fr for a fixed sidebar and flexible main column.
Use Grid for two-dimensional page layouts (dashboards, galleries, sidebars). Use Flexbox for one-dimensional rows or columns (navbars, toolbars). Nest Flex inside Grid cells freely.
Use repeat(auto-fit, minmax(200px, 1fr)) for wrapping card grids, or enable Responsive breakpoints to export @media overrides for grid-template-columns at tablet and desktop widths.
Choose Dashboard, Sidebar layout, Gallery, Holy grail, or another preset—or start with a blank 3×2 grid.
Use the quick controls for column count, row count, and gap. Try 8px, 16px, or 24px gap chips for common spacing.
Resize the container width slider to test responsive tracks. Toggle Content mode to see named regions. Drag indigo handles to resize px/fr tracks.
Click Copy CSS for the stylesheet block, or open Generated code for Tailwind, React, inline, or HTML playground tabs.
Common real-world scenarios where this tool saves time.
Frontend developers
Prototype fr-track dashboards, copy CSS or Tailwind into React/Vue components, and share layout URLs with teammates.
Designers
Build hero + feature + CTA grids with Content preview mode before handing CSS to engineering.
Students
See how column and row counts map to track strings, and how areas create named regions without memorizing syntax.
E-commerce teams
Use auto-fit minmax presets and the width slider to validate wrapping behavior before Shopify or headless storefronts.
Technical writers
Generate TOC + content layouts and export HTML playground files for quick stakeholder review.
Step-by-step chains that connect related tools for common tasks.
Build structure first, then apply design-system spacing and card styling.
Combine breakpoint column overrides with fluid typography inside cells.
Input
grid-template-columns: 250px 1fr; gap: 24px; areas: header/header; sidebar/mainOutput
Two-column app shell with named regionsLoad the Sidebar layout preset, switch Content preview mode, and copy CSS for docs sites and apps.
Input
200px 1fr 200px columns; header / left main right / footer areasOutput
Classic header, two sidebars, footer stackUse the Holy grail preset as a starting point for marketing sites with left nav and right rail.
Input
repeat(auto-fit, minmax(180px, 1fr)); gap: 20pxOutput
Wrapping card grid without media queriesResize the container slider to watch columns reflow—matches e-commerce product listings.
Input
240px 1fr 1fr 1fr; nav row; sidebar + KPI row; main contentOutput
Four-column admin shell with named areasAdmin panel preset enables areas for nav, sidebar, KPI tiles, and main workspace.
Input
6-column grid; lead story spans 4×2; sidebar railOutput
Asymmetric editorial layoutMagazine layout preset demonstrates complex grid-template-areas for publishing templates.
Input
280px 1fr; toc | content rowsOutput
Docs site two-column reading layoutDocumentation preset pairs a fixed TOC column with a flexible content column.
Your settings map to a gridValues object. CSS export calls buildFullCss(): a container rule with display:grid, grid-template-columns/rows, optional grid-template-areas, gap, and alignment properties. Child placement rules emit nth-child selectors when you span cells. Enabled breakpoints append @media (min-width) blocks that override grid-template-columns. The live preview uses the same track strings as the export via buildPreviewStyle()—what you see is what you copy.
Grid for page structure; other tools for tokens and component styling.
| Goal | Use this tool | Use instead |
|---|---|---|
| Page/dashboard grid structure | CSS Grid Generator | — |
| Single-line navbar | — | Flexbox (hand-author) |
| Consistent gap tokens | — | Spacing Scale Assistant |
| Fluid type in cells | — | CSS Clamp Calculator |
| Card border radius | — | Border Radius Generator |
This tool generates CSS Grid track and gap code. For spacing tokens, fluid type, or card styling, use the related tools below.
| Related tool | Use this tool when | Use related tool when |
|---|---|---|
| Spacing Scale Assistant | You need grid-template-columns, rows, gap, and alignment with a live preview. | You want consistent gap and margin tokens before applying them to grid gap. |
| CSS Clamp Calculator | You are defining the grid structure itself. | Typography inside grid cells should scale fluidly between breakpoints. |
| Border Radius Generator | Layout tracks and gap are done—you need card styling inside cells. | You only need border-radius CSS for components in the grid. |
Implicit rows can produce unexpected heights—use auto or fr rows for predictable layouts.
Percent tracks can overflow; fr units share free space safely beside fixed sidebars.
grid-template-areas keeps region logic readable—easier to maintain than manual line numbers.
Drag the width slider to confirm card grids wrap where you expect before shipping.
Implicit rows still form, but heights may surprise you. Set grid-template-rows explicitly or use auto for content-sized rows.
Percent tracks can overflow the container. Prefer fr for flexible columns and fixed px/rem for sidebars.
Tailwind spacing scale maps 16px to gap-4. This tool maps px values to the correct Tailwind gap class.
Fix: auto-fit and minmax() grids compute columns from container width—resize the slider to test. Named areas use the areas grid dimensions.
Fix: Non-standard tracks require arbitrary values like grid-cols-[250px_1fr]—expected for custom fr/px mixes in Tailwind v3+.
Fix: Check for wide fixed px columns or min-content tracks. Try minmax(0, 1fr) or reduce sidebar widths.
Flexbox is simpler for one-dimensional alignment—Grid adds unnecessary complexity.
This tool does not export subgrid properties—hand-author for nested grid alignment across parents.
Breakpoint export uses @media min-width, not @container—add container queries manually if needed.
Continue the workflow with the right follow-up tool.
Advertisement
CSS Grid is two-dimensional—you define rows and columns together. Flexbox is one-dimensional. Use Grid for page shells, dashboards, and galleries; Flexbox for navbars and toolbars.
1fr is one fraction of free space. Three columns of 1fr 1fr 1fr split equally. Mix 250px 1fr for a fixed sidebar and flexible main column.
Use repeat(auto-fit, minmax(200px, 1fr)) and drag the container width slider to preview wrapping. For explicit breakpoints, enable Responsive breakpoints in Advanced options.
Assign the same name to adjacent cells to form a region. The exported CSS includes a grid-template-areas block. Enable Template areas in Advanced options and click cells to cycle names.
Yes—open the Tailwind tab. Standard gaps map to gap-4 for 16px; custom tracks use arbitrary values like grid-cols-[1fr_2fr].
auto-fit and auto-fill recalculate how many columns fit based on minmax() and container width—the preview simulates this so you can test responsive behavior.
Click Share to copy a URL with your layout encoded. Opening the link restores columns, rows, tracks, areas, and breakpoints.
Yes—open Advanced options → Import CSS, paste a ruleset (including @media blocks), and click Parse into controls.
Use minmax(min, max) to set a floor and ceiling for track size—common pattern: repeat(auto-fit, minmax(200px, 1fr)) for responsive card grids.
Yes—layout values are processed in your browser and are not uploaded to EverydayTools servers for normal use.
Layout settings are processed in your browser—they are not uploaded to EverydayTools servers.
Grid code is generated locally from your column, row, gap, and track inputs. Share links encode state in the URL; optional localStorage restores your last session on this device.
Load the Sidebar layout preset, switch preview to Content mode, copy CSS, and paste into a test HTML file—confirm header and sidebar regions align.
Limitations: Test exported CSS in target browsers and with your design tokens. Arbitrary Tailwind classes may need project-specific configuration.
For design and prototyping—pair with Spacing Scale or Clamp tools for production token consistency.
Part of Design & UI Tools
More free tools for the same workflow.
Advertisement
Reviewed on 2026-06-02.
Start here — pick a layout
Choose a preset, adjust gap if needed, then copy CSS. No CSS knowledge required.
Drag the indigo handles between tracks to resize columns or rows.
Click any cell in the preview to set span placement (grid-column / grid-row).
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
justify-items: stretch;
align-items: stretch;
justify-content: stretch;
align-content: stretch;
}