My Tool Studio
CSS

CSS Grid Generator

This CSS grid generator builds a grid container with its own size for every column and row, then lets you drag across cells to place items that span several tracks. Name each item and switch on grid-template-areas to get readable area names instead of line numbers. Eight layout templates load a holy grail page, a sidebar, a dashboard, a blog post, a magazine, a photo mosaic, 12 columns or a card grid. A responsive mode writes repeat(auto-fit, minmax()) columns, and alignment dropdowns cover justify-items, align-items, justify-content and align-content. Output comes as CSS, HTML, CSS + HTML or Tailwind classes, with a share link. For example, a 4 by 3 grid with a header spanning all four columns takes one drag across the top row.

Always freeNo sign upRuns in your browser

Layout templates

Drag across the dashed cells to place an item that spans them. Name items to use grid-template-areas.

1
2
3
4
5
6
7
8
9
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 12px;
}
Responsive columns (auto-fit + minmax)
Column sizes

e.g. 1fr, 200px, 20%, auto, minmax(0, 1fr)

Row sizes

e.g. 100px, auto, 1fr, minmax(80px, auto)

column-gap12px
row-gap12px

Placed items (0)

Output grid-template-areas

No items placed yet. The output then uses auto-placement with one div per cell.

How to use

01

Start from a template or set tracks

Click a layout template, or enter Columns and Rows from 1 to 12 and type each track size, such as 240px, 1fr or minmax(80px, auto). Set all to fills every track at once.

02

Drag to place and name items

Press on a dashed cell and drag to another to create a spanning item. Rename it, fine-tune its start and span, and switch on grid-template-areas. Or turn on Responsive columns instead.

03

Copy the code

Pick CSS, HTML, CSS + HTML or Tailwind and press Copy or Download. Copy share link saves the tracks, gaps and items in a URL.

Why CSS Grid Generator

fr vs px vs minmax vs auto: grid track sizes compared

Every column and row field takes any of these. Pick the unit by asking what should decide the size: the container, a fixed number, or the content.

Track sizeWhat decides the sizeGood for
1frA share of the space left after fixed tracks and gapsEqual columns that fill the container
200pxA fixed lengthSidebars, icon columns, fixed rows
autoThe content, stretched to fill spare spaceHeader and footer rows
minmax(0, 1fr)Equal share that is allowed to shrink below contentColumns with long words or code
minmax(80px, auto)At least 80px, taller if content needs itRows that must not collapse
25%A fraction of the container, gaps ignoredRarely; fr is safer with gaps

How grid line numbers place items

Grid items are placed by the lines between tracks, not by the tracks themselves. A grid with 4 columns has 5 vertical lines, numbered 1 to 5 from the left. grid-column: 1 / 5 therefore covers all four columns.

Worked example: set 4 columns and 3 rows, then drag across the whole top row, down the first column of rows 2 and 3, and across the other cells of rows 2 and 3. The output reads grid-column: 1 / 5 with grid-row: 1 / 2 for the header, grid-column: 1 / 2 with grid-row: 2 / 4 for the sidebar, and grid-column: 2 / 5 with grid-row: 2 / 4 for the main area. That is the classic header, sidebar and content layout in three short rules.

You can also write spans as grid-column: 1 / span 2, which reads as start at line 1 and cover two tracks. It produces the same result as 1 / 3.

Three grid layout templates to copy

These patterns cover most page and component layouts, and each one is a template button in the generator. Holy grail and Sidebar left load mixed track sizes with named areas, 12 columns loads twelve equal tracks, and the responsive card grid comes from the Responsive columns switch.

In each case the child elements stay plain divs in source order. Only the container rule and a few placement rules change, which is what makes grid layouts easy to rearrange at a breakpoint.

  • Holy grail page: grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; with the header and footer set to grid-column: 1 / 4.
  • Sidebar and main: grid-template-columns: 240px 1fr; gap: 24px; the sidebar stays fixed and the main area takes the rest.
  • Responsive card grid: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; the browser fits as many 200px-plus columns as the width allows, with no media queries.
  • 12-column system: grid-template-columns: repeat(12, 1fr); then place blocks with grid-column: span 4 or span 6.

Common questions

Which properties does the CSS grid generator write?
The .grid rule gets display: grid, grid-template-columns, grid-template-rows, gap, and any alignment you change. With named areas on, it adds grid-template-areas and each item gets grid-area; otherwise each item gets grid-column and grid-row lines. Equal tracks are written with repeat().
How do I make a grid item span two columns?
Drag from one cell to the cell next to it, or add an item and set Col span to 2. The output writes grid-column: 1 / 3, which means start at line 1 and end at line 3. Lines sit between tracks, so a 3-column grid has lines 1 to 4.
Can I set a different row gap and column gap in CSS grid?
Yes. Move the column-gap and row-gap sliders separately. When they match, the tool writes a single gap value. When they differ, it writes gap with two values, row gap first and column gap second.
Can this grid tool make columns with different widths?
Yes. Each column and row has its own field, so a sidebar layout can be 240px 1fr and a holy grail 200px 1fr 200px. The tool checks every value with the browser and marks invalid ones in red. When all tracks match, the output shortens them to repeat().
How does grid-template-areas work in this generator?
Give each placed item a name such as header or main and switch on Output grid-template-areas. The tool draws the area map as quoted rows, uses a dot for empty cells, and writes grid-area on each item. Names must be unique and items cannot overlap, or it falls back to line numbers.
Does the grid generator output responsive auto-fit columns?
Yes. Switch on Responsive columns and set a minimum column width. The output becomes repeat(auto-fit, minmax(200px, 1fr)), or auto-fill if you pick it, and the preview shows cards wrapping as the width changes. Placed items are turned off in this mode, since the column count is not fixed.
Why do extra grid items create rows I never defined?
That is the implicit grid. When there are more children than cells, the browser adds rows sized by grid-auto-rows, which defaults to auto. Raise the row count here, or set grid-auto-rows in your stylesheet so the extra rows match your design.
Can two grid items overlap in the same cells?
Yes. CSS grid allows items to share cells, and the generator lets you drag an item over another. The one that comes later in the HTML paints on top unless you set z-index. Overlapping items cannot use grid-template-areas, so the tool keeps line numbers for them.
Is 1fr the same as 100 percent for a grid track?
No. A percentage is measured against the whole container and ignores gaps, which is how three 33.33% columns plus gaps overflow. An fr unit shares only the space left after fixed tracks and gaps, so fr columns never overflow on their own.
Can I copy the CSS grid as Tailwind classes?
Yes. The Tailwind tab writes grid, grid-cols-[...] and grid-rows-[...] with your tracks, gap classes and alignment, and gives each placed item col-[1/3] and row-[1/2] style classes in the matching HTML.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS