CSS Grid Generator (CSS + Tailwind)

About this tool

CSS grid lets you describe a page layout in a few lines: how many columns and rows there are, how big each one is, and which part of the page goes where. The syntax is compact but easy to get wrong, especially grid-template-areas, where every row string must have the same number of cells and every area must form a rectangle. This generator lets you set the tracks and gaps, draw named areas on a live preview, and copy either plain CSS or the equivalent Tailwind CSS classes. It all runs in your browser.

How to use the CSS grid generator

1. Set the number of columns and rows (up to 12 each), then type a size for each track, such as 1fr, 200px, auto or minmax(150px, 1fr). Invalid sizes are outlined in red and left out until fixed.
2. Set the gaps between columns and rows in pixels, and choose justify-items and align-items if items should not stretch to fill their cells.
3. Draw areas. Press on a cell in the preview and drag to another cell; a rectangle becomes a new area. On a touch screen, drag with one finger. You can also click Add area and type the row and column numbers in the table.
4. Rename the areas in the table (letters, digits, - and _; they must not start with a digit).
5. Copy the CSS or the Tailwind version with the buttons under each output.

How the output is built

The CSS output puts display: grid, grid-template-columns, grid-template-rows and the gap on a .container class. If you defined areas and none of them overlap, it also writes grid-template-areas, with a . for every cell that belongs to no area, and gives each area a class such as .item-header { grid-area: header; }. Overlapping areas cannot be written as a template, so in that case each item gets line numbers instead, in the form grid-area: row-start / column-start / row-end / column-end, and the status line tells you which areas overlap.

Grid lines are numbered from 1, starting before the first track. An area that covers rows 1 to 1 and columns 1 to 3 therefore runs from row line 1 to row line 2 and from column line 1 to column line 4. That is why the table uses inclusive cell numbers and the output uses end lines one higher.

The fr unit, minmax() and auto

• fr is a fraction of the leftover space in the grid container, as described on MDN's <flex> page. Fixed tracks and gaps are taken out first, and the rest is shared in proportion: 1fr 2fr gives the second column twice as much of what is left.
• minmax(min, max) sets a size range. Per MDN, an fr value is only allowed as the maximum, so minmax(150px, 1fr) is valid but minmax(1fr, 150px) is not. If the maximum is smaller than the minimum, the maximum is ignored.
• auto sizes a track to its content, and lets it stretch when there is spare space.

auto-fill vs auto-fit

For responsive card grids you often do not want a fixed column count. repeat(auto-fill, minmax(200px, 1fr)) creates as many 200px-or-wider columns as fit. The MDN repeat() reference explains the difference: auto-fit behaves like auto-fill, except that after the items are placed, any empty repeated tracks collapse to zero. So with only two cards in a wide container, auto-fill keeps empty columns and the cards stay 200px or so wide, while auto-fit drops the empty columns and the two cards stretch across the full width. This generator works with a fixed number of tracks; paste a repeat() line into your CSS by hand when you need that behavior.

Tailwind output and versions

The Tailwind version uses arbitrary values, so the result is exactly the same as the CSS: grid-cols-[200px_1fr_1fr], grid-rows-[…] and gap-[16px] (or gap-x-[…] and gap-y-[…] when the gaps differ). Tailwind turns underscores into spaces at build time. Areas are placed with col-start-*, col-end-*, row-start-* and row-end-*, which Tailwind v3 includes for lines 1 to 13 (enough for 12 tracks) and v4 accepts for any line number. These classes appear in both the Tailwind v3 docs and the v4 docs, and we compiled the output with Tailwind 3.4.17 and 4.1.14 to confirm it produces the same declarations as the CSS.

Two details are worth knowing. First, grid-cols-3 is not the same as 1fr 1fr 1fr: it compiles to repeat(3, minmax(0, 1fr)), which lets columns shrink below their content width. Second, items-start compiles to align-items: flex-start; MDN notes that outside a flex container this behaves as start, so the layout matches.

Grid or flexbox?

MDN's comparison puts it simply: flexbox was designed for layout in one dimension, a row or a column, while grid was designed for two dimensions at once. Flexbox works from the content out and suits a row of buttons or a nav bar. Grid works from the layout in: you define the tracks and place items into them, which suits page layouts, dashboards and card galleries. Many pages use both, with a grid for the page and flexbox inside each area.

Worked example

The default layout is the classic page shell: a 200px sidebar next to two equal content columns, a header and footer that size to their content, and a middle row that is at least 150px tall. The tool outputs this CSS:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto minmax(150px, 1fr) auto;
  gap: 16px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.item-header { grid-area: header; }
.item-sidebar { grid-area: sidebar; }
.item-main { grid-area: main; }
.item-footer { grid-area: footer; }

and this Tailwind markup:

<div class="grid grid-cols-[200px_1fr_1fr] grid-rows-[auto_minmax(150px,1fr)_auto] gap-[16px]">
  <div class="col-start-1 col-end-4 row-start-1 row-end-2">header</div>
  <div class="col-start-1 col-end-2 row-start-2 row-end-3">sidebar</div>
  <div class="col-start-2 col-end-4 row-start-2 row-end-3">main</div>
  <div class="col-start-1 col-end-4 row-start-3 row-end-4">footer</div>
</div>

In a container 1,000px wide, the two 16px gaps and the 200px column use 232px, leaving 768px of free space. The two 1fr columns share it equally, so each is 384px wide. The main area spans both of them plus the gap between: 384 + 16 + 384 = 784px.

Common mistakes

• Areas that are not rectangles. An L-shaped area is invalid in grid-template-areas and the whole declaration is ignored. Split it into two areas.
• Rows that do not match. Each string in grid-template-areas must have one name per column. The generator always writes complete rows.
• Forgetting the item class. The container CSS alone does nothing to the children; each child needs its grid-area.
• Using 1fr rows in a container with no height. Free space only exists if the container is taller than its content. Give the container a height, or use minmax() as the example does.

Use cases

• Page shells with header, sidebar, main content and footer
• Dashboards with cards of different sizes
• Converting a hand-written grid to Tailwind classes, or the reverse

To convert pixel sizes for your tracks, use the PX to REM Converter. Shrink the final stylesheet with the CSS Minifier, and add a background to your areas with the CSS Gradient Generator.

Related reading

For a longer explanation, read our guide: CSS Grid vs Flexbox: when to use each.