LocalToolsOffline browser tools collection

Category: Developer tools

CSS Grid Generator

System ideaMissing a tool?

Build a grid-template layout and copy the CSS

Set the column and row count and the gap on a live grid preview, optionally switching columns to a minmax() track so they can shrink before wrapping, then copy the finished container declaration. Nothing here leaves your browser.

Output
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

grid-template-columns: repeat(n, 1fr) gives equal columns that never shrink below their content, which overflows on narrow screens. Swapping in minmax(min, 1fr) lets each column shrink down to a floor before the grid gives up and wraps — the difference between a layout that reads fine on a phone and one that does not. This tool builds both forms from the same controls so the difference is visible on a real grid, not just in the declaration.

How to use it

  1. Set the number of columns and rows.
  2. Set the gap between cells.
  3. Turn on minmax() columns if you want them to shrink on narrow screens, then copy the CSS.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Is the preview a real CSS grid?
Yes. The numbered cells are laid out with the exact grid-template-columns and grid-template-rows you are setting.
What does minmax() actually change?
Without it, repeat(n, 1fr) columns stay equal but never shrink past their content, so a narrow container just overflows. minmax(min, 1fr) lets each column shrink down to the minimum before the browser looks for another way to fit them.
Is anything uploaded?
No. The declaration is text built from the controls you set, and the preview grid is rendered locally in the page.

Back to all tools