Skip to main content
T

CSS Grid Generator

NEW

Build a CSS grid layout visually — set columns, rows, gaps and track sizing, then copy the generated CSS.

Preview

CSS

Send output to:
Advertisement

How to use CSS Grid Generator

  1. Set the number of columns and rows for the grid.
  2. Choose a track sizing unit such as fr, px, auto, or minmax.
  3. Adjust the column-gap and row-gap, plus justify-items and align-items.
  4. Copy the generated grid CSS and paste it into your project.

What is CSS Grid Generator?

This tool is an interactive playground for two-dimensional CSS Grid layouts. Declaring display: grid lets you arrange content into rows and columns at the same time, and this generator builds the track definitions for you.

Choose how many columns and rows you want, pick a track sizing unit such as flexible fr units, fixed pixels, auto, or a responsive minmax() range, and add column and row gaps. The numbered cells update live in a real grid, and the output uses repeat() for clean, readable CSS you can copy into your stylesheet. It all runs locally in your browser.

Advertisement

FAQ

What does the fr unit mean in grid track sizing?
The fr unit represents a fraction of the free space in the grid container. Using repeat(3, 1fr) creates three equal-width columns that share the available space, expanding and shrinking responsively as the container resizes.
When should I use minmax() instead of fr?
Use minmax() when tracks need both a floor and ceiling, such as minmax(80px, 1fr), which keeps a column at least 80px wide but lets it grow to fill space. Plain fr has no minimum and can shrink below readable widths on small screens.

Related tools

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement