RunLocalTools

Tailwind Grid Generator — CSS Grid Builder with Named Areas

Build a CSS Grid layout visually — equal columns, custom tracks, or named grid areas — and export accurate Tailwind utility classes (with automatic arbitrary-value fallback), plain CSS, and a ready HTML skeleton.

What it does

A visual builder for CSS Grid layouts in three modes: equal columns (a simple N-column, M-row grid), custom tracks (any mix of fr, px, %, minmax(), or repeat() per column/row), and named grid areas (paint a layout by name, like a classic “holy grail” header/sidebar/main/footer). Whatever you build, you get back Tailwind utility classes for the container and every item, the equivalent plain CSS, and a paste-ready HTML skeleton.

How it works

Every class this tool generates checks against Tailwind’s real default scale before falling back to an arbitrary value — grid-cols-4 if 4 columns fits Tailwind’s default 1–12 scale, grid-cols-[repeat(20,minmax(0,1fr))] if it doesn’t; gap-4 if your gap lands exactly on Tailwind’s spacing scale (multiples of 4px, plus the documented half-steps), gap-[17px] if it doesn’t. That matters because a lot of quick grid-class generators just always emit arbitrary values — this one uses the shorter, more idiomatic named class whenever it’s actually accurate, and never claims a match that isn’t real.

Named grid areas get one honest limitation called out up front: Tailwind has no built-in utility for grid-template-areas or grid-area in either v3 or v4 — every “Tailwind grid areas” plugin you’ll find online is a third-party addition, not core Tailwind. Rather than pretend otherwise or require you to install a plugin, this tool exports the container’s grid-template-areas as plain CSS to add alongside your Tailwind classes, and each item’s placement as Tailwind’s generic arbitrary-property syntax ([grid-area:name]), which needs no plugin and works in any Tailwind version. The named-areas painter also checks that every area you paint forms one solid rectangle — CSS requires this, and an L-shaped or split area silently fails at the browser level, so the tool flags it before you find out the hard way.

Responsive breakpoint overrides (sm:, md:, lg:, xl: column counts) are available in Equal-columns mode, where a single number per breakpoint is enough to express the change cleanly; Custom-tracks and Named-areas mode intentionally don’t try to also manage a full breakpoint matrix of track/area layouts, since that stops being something a form can represent honestly.

How to use it

  1. Choose a mode: Equal columns for a simple grid, Custom tracks for specific track sizes, or Named areas for a semantic layout.
  2. Use a preset to start, or build from scratch — set column/row counts or tracks, and gap.
  3. In Equal-columns mode, optionally set a different column count per breakpoint.
  4. Add items (or, in Named-areas mode, paint cells with a name) and set spans/starts as needed.
  5. Copy the Container classes, Item classes, Plain CSS, or full HTML skeleton from the tabs on the right.

For a single row or column rather than a full 2D grid, Flexbox is usually the simpler, more appropriate tool — see the CSS Flexbox Generator. If you’d rather work in plain CSS without any Tailwind classes at all, there’s the CSS Grid Generator. And if a track needs to scale smoothly with the viewport rather than snapping between fixed sizes, the Fluid Typography Clamp() Calculator can generate a clamp() value to drop straight into a custom track.

Limitations

  • No Tailwind core utility exists for grid-template-areas/grid-area — the areas mode always exports a small amount of plain CSS alongside the Tailwind classes, by design, never a fake utility class.
  • Named-areas mode doesn’t currently manage separate area layouts per responsive breakpoint — build the base layout here and adjust breakpoints by hand if you need a genuinely different area map on mobile.

FAQ

Why did my column count turn into a long grid-cols-[repeat(...)] class instead of a short one? Tailwind’s default scale only goes up to grid-cols-12 out of the box. Past that, there’s no short named class to use, so the tool falls back to an arbitrary value that does the same thing — it’s not a bug, just Tailwind’s actual limit.

Why is my named area shown with a warning about not being a rectangle? CSS’s grid-template-areas requires every named area to occupy a single, solid rectangular block of cells — an L-shape or two disconnected blocks with the same name is invalid CSS and the browser will silently ignore that area’s placement. Repaint it so it forms one connected rectangle.

Do I need a plugin for the named-areas output to work? No. The plain CSS grid-template-areas rule and the [grid-area:name] arbitrary-property classes both work with stock Tailwind — no plugin required. A plugin would only get you a shorter class name, which this tool intentionally doesn’t assume you have.

What’s the difference between “Equal columns” and using a custom track list of 1fr 1fr 1fr? Functionally nothing for that specific case — but Equal-columns mode also unlocks the responsive per-breakpoint column-count controls, which Custom-tracks mode doesn’t offer, since a different track list per breakpoint is a much bigger thing to manage cleanly in one form.

Can I mix pixel and fr tracks? Yes — that’s exactly what Custom-tracks mode is for. A common pattern is a fixed sidebar plus a flexible content area, like 240px 1fr, which is also available as a one-click preset.

How do I make a responsive card grid that adds columns as the container gets wider, without a specific breakpoint? Use the “Quick auto-fit card grid” control in Custom-tracks mode — it generates repeat(auto-fit, minmax(Npx, 1fr)), which reflows continuously based on available width rather than snapping at fixed breakpoints.