CSS Grid Generator - Free Visual Layout Builder

This CSS grid generator lets you build a grid layout visually: set the columns, rows, gaps and alignment, watch a numbered live preview update, then copy the finished CSS. It suits developers and designers who want a clean starting point for a page or card layout without writing grid code by hand.

What Is CSS Grid?

CSS Grid is a two-dimensional layout system that places content into rows and columns at the same time. You turn an element into a grid container with display: grid, describe the tracks (the columns and rows), and the browser drops each child element into a cell.

A few terms come up constantly when you work with grid:

• Track: a single column or row in the grid.
• Gap: the empty space between tracks. Column gap separates columns, and row gap separates rows.
• Grid item: a direct child of the grid container.
• Cell: the space where one row and one column cross.

What is fr in CSS Grid?

The fr unit is a fraction of the free space left in the grid container after fixed sizes and gaps are subtracted. In 1fr 2fr, the second column gets twice as much of the leftover width as the first.

What is minmax in CSS Grid?

The minmax() function sets a minimum and a maximum size for a track. A column of minmax(200px, 1fr) never shrinks below 200px, but it can grow to share the remaining space equally with other columns.

CSS Grid vs Flexbox: which should you use?

Grid controls rows and columns together, while Flexbox lays items out along a single line. Use grid for page structure, galleries and dashboards. Use Flexbox for a nav bar, a button group or anything that flows in one direction. Many layouts use both: grid for the outer frame and Flexbox inside each cell.

How to Use the CSS Grid Generator

You can go from a blank grid to copyable code in under a minute. Every control updates the preview and the code instantly.

1. Drag the Columns slider to choose 1 to 12 columns, and the Rows slider to choose 1 to 8 rows. Both start at 3.
2. Set the Column Gap and Row Gap sliders from 0 to 40 pixels. Both start at 10px.
3. Pick a Column Template: Equal Fractions, Auto, Responsive (minmax) or Custom. If you choose Custom, type your own track list into the Custom Column Template field, for example 200px 1fr 2fr.
4. Choose justify-items (horizontal alignment inside each cell) and align-items (vertical alignment). Each offers stretch, start, end or center.
5. Look at the preview. It shows one numbered, colored block for every cell, so you can see spacing and alignment right away.
6. Click Copy under Generated CSS and paste the rules into your stylesheet.

How to make a 2x2 or 3x3 grid in CSS

Set both sliders to 2 for a 2x2 grid, or leave them at the default 3 and 3 for a 3x3 grid. Keep the template on Equal Fractions and the output gives you equal-width columns and automatic row heights, ready to paste.

Worked Example: A Four-Column Card Grid

Say you want eight product cards in two rows of four, with a little more space between columns than between rows. Set Columns to 4, Rows to 2, Column Gap to 20 and Row Gap to 10. Leave the template on Equal Fractions, keep justify-items on stretch, and set align-items to center.

The preview shows eight blocks numbered 1 to 8, and the Generated CSS reads like this:

.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); column-gap: 20px; row-gap: 10px; justify-items: stretch; align-items: center; }

Here is what that means in practice. In a 1000px-wide container, the three column gaps take 60px, which leaves 940px. Each of the four columns is then 235px wide. Rows are only as tall as their content, and each card sits in the vertical middle of its row.

A custom template example

Choose Custom and enter 200px 1fr 2fr. In a 1000px container with 10px column gaps, the first column is fixed at 200px. The remaining 780px is split 1 to 2, giving 260px and 520px. This is a typical pattern for a sidebar plus two content areas.

How to Read the Options and the Generated CSS

Each control maps to one line of the output, so you can tune a single value and see exactly which line changes. The table below summarizes the four column template choices.

justify-items vs align-items

justify-items moves items left to right inside their cell, while align-items moves them top to bottom. Stretch fills the whole cell and is the default behavior. Start, end and center shrink each item to its content and pin it to that position. If your blocks suddenly look smaller after you change an alignment, that is expected: they no longer stretch.

What a healthy result looks like

A good layout has gaps that feel consistent, columns wide enough for their content, and no horizontal overflow. As a widely used guideline, gaps between 16px and 24px suit card layouts, while 8px to 12px suit dense dashboards. The sliders stop at 40px, which covers most real designs.

How to Make CSS Grid Responsive

A responsive grid changes its column count as the container gets narrower. The Responsive (minmax) option sets each column to at least 200px, but it uses the fixed column count from the slider. On a very narrow screen, those columns can overflow instead of wrapping.

For true wrapping, choose Custom and enter repeat(auto-fit, minmax(200px, 1fr)). The browser then fits as many 200px-plus columns as the width allows and wraps the rest onto new rows. With auto-fill, empty columns are kept so items hold their size. With auto-fit, empty columns collapse and the remaining items stretch to fill the row.

For layouts that must change structure at set widths, pair the grid with breakpoints from a CSS media query generator. For example, use 1 column below 600px, 2 columns up to 900px and 4 columns above that.

Who Uses a CSS Grid Generator?

Anyone who needs a layout skeleton quickly gets value from a visual grid builder. Typical situations include:

• Front-end developers prototyping a dashboard, pricing table or photo gallery before adding real content.
• Designers checking how many columns and what gap size feel right before handing specs to developers.
• Students learning how column count, gap and alignment change the result, without memorizing property names.
• Site owners and bloggers who want a tidy grid for a related-posts block or a feature section and prefer to paste ready-made CSS.

Best Practices, Common Mistakes and Troubleshooting

Most problems with generated grids come from a few predictable mistakes, and each has a quick fix.

• The Copy button is disabled and an error appears. Your Custom Column Template is not valid CSS. Use only track sizes such as 200px, 1fr, minmax(150px, 1fr) or repeat(3, 1fr), separated by spaces, with no semicolons or braces.
• Nothing changes when you pick Custom. If the custom field is empty, the generator falls back to equal fractions based on the Columns slider. Type your own template to override it.
• Auto shows a single column. That is correct. Auto sets one content-sized column, so cells stack. Choose Equal Fractions or Custom when you want several columns.
• Columns are uneven when you expected equal. Mixing fixed and fractional sizes, such as 200px 1fr 2fr, is intentional. Use repeat(N, 1fr) for identical widths.
• Content overflows its column. Long words or wide images can force a track wider than planned. Use minmax(0, 1fr) in a Custom template so the track is allowed to shrink.

Rename the .grid-container class to something meaningful, such as .product-grid, before you ship it. Once the CSS is in your stylesheet, a CSS formatter keeps it readable while you work, and a CSS minifier shrinks it for production. If your project uses Sass, the Sass to CSS converter helps when you move rules between formats.

Limitations to Keep in Mind

This tool builds the container-level rules of a grid: columns, uniform rows, gaps and item alignment. It does not create named grid areas, make individual items span several columns or rows, or set per-item placement.

Rows are always generated as automatic height, so each row grows with its content. The preview uses numbered placeholder blocks of a fixed height, which means your real content may change row heights. When you need a hero that spans the full width, add grid-column: 1 / -1 or grid-column: span 2 to that item by hand after pasting the CSS.

Once the grid is in place, you can style the cells with a CSS box shadow generator for card depth. More helpers for front-end work are collected in the web developer tools section.

A visual builder removes the guesswork from grid syntax: you see the layout, adjust it and copy clean CSS in seconds. Use the CSS grid generator on this page to set your columns, rows and gaps now, then paste the result into your project.