CSS Grid Generator Online - Free Grid Layout Builder

Features

Row/column setup

Drag to resize

Cell merging

Gap control

Generate CSS + HTML

How to Use

1. Set the number of rows and columns.

2. Adjust row heights and column widths (fr, px, auto).

3. Set grid gap.

4. Copy the generated CSS and HTML.

About this tool

CSS Grid lays out content in rows and columns at the same time, which makes it the natural choice for galleries, dashboards and page structures. This generator sets up a grid container visually: choose how many columns and rows you need, the gap between them, and how columns share space — equal fractions with 1fr, automatic sizing, minmax(0, 1fr) to stop long content from blowing out a column, or fixed 100px tracks. The preview shows how items flow into the tracks, and the CSS is written with repeat() for compact, readable output. Copy it as a starting point, then place individual items with grid-column and grid-row in your own stylesheet.

Frequently Asked Questions

What does the fr unit mean?

fr stands for a fraction of the free space in the grid container. Three columns of 1fr share the space equally, while 2fr 1fr gives the first column twice the width of the second.

Why use minmax(0, 1fr) instead of 1fr?

A 1fr track cannot shrink below the minimum size of its content, so a long word or wide table can stretch the column. minmax(0, 1fr) lets the column shrink, which keeps equal columns equal.

How do I make a grid responsive?

A common pattern is grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)), which fits as many 240px-minimum columns as the width allows and wraps the rest onto new rows without media queries.

How do I make an item span several columns?

Add grid-column: span 2 to the item to cover two columns, or grid-column: 1 / -1 to stretch it across the full width. grid-row works the same way for rows.

What is the difference between gap, column-gap and row-gap?

column-gap sets space between columns, row-gap sets space between rows, and gap is shorthand for both. Gaps add space only between tracks, not around the outside of the grid.