CSS Grid Generator

Pick your columns, rows, and gap, see the grid update live, and copy clean grid-template CSS.

Live preview

Generated CSS

This generator runs entirely in your browser. Nothing you enter is uploaded.

How to use this tool

This visual CSS grid layout generator turns a few simple choices into copy-ready code. Start by setting the number of columns and rows you want, then add a gap value in pixels to control the spacing between cells. Use the column and row sizing menus to decide whether tracks share space equally, hug their content, or stay a fixed size. Click Generate grid to update the live preview, then press Copy CSS to grab the grid-template code and paste it straight into your stylesheet.

How the grid columns and rows builder works

display: grid; grid-template-columns: repeat(COLUMNS, SIZE); grid-template-rows: repeat(ROWS, SIZE); gap: GAP px;

A CSS grid container splits space into tracks. grid-template-columns defines the vertical tracks and grid-template-rows defines the horizontal ones. The repeat() function is shorthand so you do not have to type the same size many times. Sizing keywords change the behavior: 1fr means one fraction of the leftover space (so equal columns split the row evenly), auto sizes a track to its content, and minmax(120px, 1fr) lets a track shrink down to a minimum but grow to fill space, which is the backbone of responsive grid template layouts. The gap property adds consistent spacing between every row and column without needing margins.

A real example

Say you want a simple photo gallery with 3 equal columns, 2 rows that hug their content, and 16px of spacing. You would set Columns to 3, Rows to 2, Gap to 16, leave column sizing on Equal (1fr each), and leave row sizing on Auto. The tool produces this exact CSS:

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

Drop that on a container with six child elements and you get a tidy 3-by-2 gallery where each item takes an equal share of the width and 16 pixels separate them.

Common questions

What is the difference between 1fr and auto for column sizing?

A track set to 1fr takes an equal fraction of the available space, so three 1fr columns each fill one third of the row regardless of content. An auto track only takes as much width as its content needs, which can make columns uneven. Use 1fr for balanced layouts and auto when you want columns to hug their content.

What does the responsive minmax option do?

The minmax option outputs tracks like minmax(120px, 1fr). Each column will never shrink below 120 pixels but can grow to share leftover space. This keeps cells readable on small screens while still filling wide ones, which is a common pattern for responsive grid layouts.

How do I apply the generated CSS to my page?

Copy the CSS, paste it into your stylesheet, and give the matching class (for example, class="grid") to a container element. Any direct children of that container automatically become grid items and flow into the tracks you defined.

Why is gap better than using margins?

The gap property adds spacing only between tracks, never around the outside edge, so you do not get awkward extra space at the container border. It also keeps spacing consistent in both directions with a single value, unlike margins which you must manage on each item.

Is there a limit on columns and rows?

This builder caps columns and rows at 12 each to keep the live preview readable and reflect common layout needs. In real CSS you can use as many tracks as you like, but most page and component grids stay within a handful of columns.

Related tools