CSS Grid Generator

Number of columns Number of rows gap (px) The space between tracks, both between columns and between rows. justify-items How each item sits inside its own cell, left to right. align-items How each item sits inside its own cell, top to bottom. justify-content How the whole grid is spread left to right when it is narrower than its container. align-content How the whole grid is spread top to bottom when it is shorter than its container.

Column sizes

One size per column — 1fr, 200px, 25%, auto, min-content, max-content, or minmax(100px, 1fr).

Row sizes

One size per row — auto, 100px, 1fr, or minmax(50px, auto).

Live preview

Generated HTML Generated CSS

What do these grid properties do?

display: grid: Turns an element into a grid container, so its children become grid items laid out in rows and columns.
grid-template-columns: The width of each column — 1fr means one share of the free space, so 1fr 1fr 1fr makes three equal columns.
grid-template-rows: The height of each row — auto sizes a row to its tallest item.
gap: The space between tracks, both between columns and between rows.
justify-items: How each item sits inside its own cell, left to right.
align-items: How each item sits inside its own cell, top to bottom.
justify-content: How the whole grid is spread left to right when it is narrower than its container.
align-content: How the whole grid is spread top to bottom when it is shorter than its container.
grid-column: Where an item sits across the columns — 1 / span 2 means start at column line 1 and cover two columns.
grid-row: Where an item sits across the rows — 1 / span 2 means start at row line 1 and cover two rows.

The preview container is 220px tall so align-content is easy to see. Items with no placement are laid out automatically, row by row, in order.

What is the CSS Grid Generator?

A CSS grid generator is a visual tool that builds CSS Grid layouts for you. You choose how many columns and rows the grid has, set each track’s size, place items across the grid, and watch the result in a live preview. The tool then gives you clean HTML and CSS to paste into your own page.

Grid is CSS’s two-dimensional layout system: it arranges items in rows and columns at the same time. It is the right tool for photo galleries, card grids, dashboards and whole page layouts with a sidebar. The trouble is that Grid has a lot of moving parts — track sizes, gaps, alignment on two axes, and items that can span several cells — and a typo in a track size can break the whole layout. This free CSS grid generator lets you see every change as you make it, and a plain-English explainer under the tool says what each property does. It is for anyone building a website, from beginners to developers who want a gallery or dashboard layout without writing the CSS by hand.

How to use the CSS Grid Generator

The tool sits at the top of this page. The grid settings and item controls are on the left and the live preview with the generated HTML and CSS is on the right. Follow these steps:

Set the number of columns and rows. “Number of columns” and “Number of rows” each run from 1 to 6, with a slider and a number box. The tool loads with 3 columns and 2 rows, which is a good starting point for a card grid.
Size the tracks. Under “Column sizes” there is one size per column; under “Row sizes”, one per row. A column can be 1fr, 200px, 25%, auto, min-content, max-content or minmax(100px, 1fr). A row can be auto, 100px, 1fr or minmax(50px, auto). The fr unit means “one share of the free space”, so 1fr 1fr 1fr makes three equal columns.
Set the gap. “gap (px)” is the space between tracks, both between columns and between rows. The tool loads with 16 pixels.
Align the grid. “justify-items” sets how each item sits inside its own cell, left to right; “align-items” does the same top to bottom. “justify-content” spreads the whole grid left to right when it is narrower than its container, and “align-content” spreads it top to bottom when it is shorter. The defaults are stretch for the items and start for the content.
Place the items. The tool loads with five items, and the first one spans two columns. Each item has four controls: “Column start”, “Column span”, “Row start” and “Row span”. Set a span of 2 to make an item cover two columns or two rows. Items with no placement are laid out automatically, row by row, in order. Click “Add an item” to add more, or remove one with its remove button.
Copy the code. Click “Copy HTML” or “Copy CSS” for one part, “Copy HTML + CSS” for both together, or “Download example” to save a complete example file. “Clear” empties the output and “Reset” restores the default three-column grid.

Worked example: a card grid with a wide first card

Say you want a gallery where the first card is twice as wide as the rest. Keep the default 3 columns and 2 rows, and set the first item’s “Column span” to 2. The generated CSS looks like this:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}
.grid-item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}

grid-column: 1 / span 2 means “start at column line 1 and cover two columns”. The other items fill in automatically around it. The HTML is a container with one div per item:

<div class="grid-container">
  <div class="grid-item grid-item-1">Item 1</div>
  <div class="grid-item grid-item-2">Item 2</div>
  <div class="grid-item grid-item-3">Item 3</div>
  <div class="grid-item grid-item-4">Item 4</div>
  <div class="grid-item grid-item-5">Item 5</div>
</div>

Replace the placeholder text with your cards, rename the classes to match your own project if you like, and the layout is done. The preview container is 220 pixels tall so align-content is easy to see while you work.

Where to use CSS Grid

Photo galleries. A grid of equal columns with a fixed gap is the natural shape for a gallery. Use 1fr columns so the images share the width evenly, and let one or two images span two columns to break the rhythm. Set the row size to auto so each row grows to fit its tallest image.

Card grids. Product listings, blog archives and team pages are all card grids: the same card repeated, three or four across. Grid is better than Flexbox here because it controls both directions at once — the columns stay aligned even when the cards have different amounts of text. Set align-items: stretch so the cards in a row share a height.

Page layouts. A classic page — header, sidebar, main content, footer — is a grid with two columns and three rows. The sidebar spans the middle rows, the header and footer span both columns. If the sidebar should be a fixed width, set its column to 250px and the main column to 1fr so it takes the rest.

Tips for better grid layouts

Start with fr units. The fr unit divides free space, so 1fr 1fr 1fr gives three equal columns whatever the container width is. Use fr for the flexible parts of your layout and fixed sizes only where something must be an exact width — a 250-pixel sidebar, a 100-pixel thumbnail column.

Use minmax to keep tracks sensible. minmax(100px, 1fr) means “at least 100 pixels, but grow to take a share of the free space”. It stops a column collapsing to nothing when the container gets narrow, which is the most common cause of a broken grid.

Span items deliberately. An item that spans two columns is a feature — a wide card, a banner, a featured article. An item that spans two columns by accident is a bug. Set spans on purpose, one item at a time, and check the preview after each change. Items you do not place are laid out automatically, row by row, so an unplaced item can end up somewhere you did not expect if a spanning item has moved the flow.

Mind the gap. A gap of 16 pixels is comfortable for cards; 8 pixels feels tight and 32 feels airy. The gap applies between tracks only, never at the edges, so your grid’s outer edges stay flush with the container.

Align items before aligning content. justify-items and align-items control items inside their cells; justify-content and align-content control the whole grid inside its container. The second pair only does anything when the grid is smaller than its container — if your grid already fills the width, justify-content has nothing to spread.

Frequently asked questions

What is the difference between Grid and Flexbox?

Grid arranges items in two directions — rows and columns at the same time. Flexbox arranges them in one direction — a row or a column. Use Grid for a two-dimensional layout (a gallery, a dashboard, a page skeleton) and Flexbox for a line of things (a navigation bar, a row of buttons).

What does 1fr mean?

It means “one fraction of the free space”. If a grid has three columns of 1fr 1fr 1fr, the free space is split into three equal shares. If the columns are 1fr 2fr 1fr, the middle column gets half the space and the other two get a quarter each. Fixed sizes like 200px are taken out first, and the fr tracks share whatever is left.

Why is there empty space at the end of my grid?

Usually because the grid is smaller than its container and justify-content or align-content is set to start, which packs everything to one side. Set them to space-between or center to spread the grid out, or give a track 1fr so it grows to fill the container.

Do I need to write the CSS myself?

No. The tool writes both the HTML and the CSS for you, with class names .grid-container, .grid-item and .grid-item-1, .grid-item-2 and so on. Copy them, rename the classes to match your own project if you like, and replace the placeholder item text with your real content.

Conclusion

Grid turns a two-dimensional layout from a calculation into a picture: columns, rows, gap and spans, all visible in the preview as you set them. Build your layout above with the CSS Grid Generator, read the explainer under the tool if a property is unfamiliar, and copy the code when it looks right. When your layout is a single line of items rather than a grid, the CSS Flexbox Generator on this site builds rows and columns the same way.