CSS Grid Generator
Lay out a grid in seconds and take away clean code. Choose a fixed number of columns, a responsive grid that adapts to the screen without media queries, or a sidebar layout; set gaps, row heights and alignment, and copy the result.
- Runs in your browser
- No sign-up
- Free to use
Columns
Rows and gaps
Alignment and items
How to use CSS Grid Generator
- Choose the column layout: a fixed number, responsive auto-fit, or sidebar plus content.
- Set the number or minimum width of the columns.
- Adjust row height, the gaps between columns and rows, and the alignment of items.
- Copy the CSS and the HTML skeleton.
CSS Grid Generator features
Three column modes
Equal fixed columns, self-adjusting auto-fit columns, or a fixed sidebar beside flexible content.
Responsive without media queries
The auto-fit mode adds and removes columns as space allows.
Overflow-safe tracks
Columns use minmax(0, 1fr), so long words or wide images cannot push the grid wider than its container.
Row control
Automatic rows, equal-height rows or a minimum row height.
Spanning item
Optionally make the first item span two columns for a featured card.
Live preview
Up to sixteen numbered items show how the grid flows.
When to use CSS Grid Generator
- Product and image galleries that adapt to the screen width.
- Page layouts with a sidebar and a main area.
- Dashboards made of equally sized tiles.
- Card grids with a featured first item.
CSS Grid Generator FAQ
What does 1fr mean?
fr is a fraction of the free space in the grid. Three columns of 1fr share the width equally. With 2fr 1fr, the first column gets two thirds of the free space. Fixed tracks and gaps are subtracted before the fractions are calculated.
Why does the code use minmax(0, 1fr) instead of 1fr?
A plain 1fr track has a minimum size of its content, so a long word, a table or a wide image can force a column wider than its share and make the page scroll sideways. minmax(0, 1fr) lets the column shrink below its content, keeping the columns truly equal.
How does the responsive mode work?
repeat(auto-fit, minmax(160px, 1fr)) tells the browser to fit as many columns of at least 160 pixels as there is room for and to share the remaining space among them. As the container narrows, columns drop to the next row automatically. No media queries are needed.
What is the difference between auto-fit and auto-fill?
Both create as many columns as fit. When there are fewer items than columns, auto-fill keeps the empty columns, so items stay at their minimum width, while auto-fit collapses the empty ones and stretches the items to fill the row.
How do I make an item span several columns or rows?
Set grid-column: span 2 on the item, or grid-row: span 2 for rows. For exact placement, give line numbers, for example grid-column: 1 / 3. The featured option demonstrates a two-column span on the first item.
What is the difference between justify-items and align-items in grid?
Each item sits in a cell. justify-items positions it horizontally within the cell and align-items vertically. The default for both is stretch, which makes the item fill its cell.
Two-dimensional layout with grid
CSS grid is the layout system built for arranging content in rows and columns together. Where flexbox lines items up along one axis and lets them wrap, grid defines tracks first and places items into the resulting cells. This makes alignment in both directions automatic. Everything in a column shares its width, and everything in a row shares its height.
The heart of a grid is grid-template-columns. Listing track sizes creates the columns, and the repeat() function saves writing the same size several times. The fr unit distributes free space proportionally, and minmax() sets a lower and an upper bound for a track. Combining these three produces most real layouts. Equal columns, a fixed sidebar beside a flexible main area and a fluid gallery are all one line each.
Rows usually need less attention, because the grid creates them as items arrive. grid-auto-rows controls their height. Leaving it automatic sizes each row to its tallest item. A value of 1fr makes all rows equally tall, and minmax with a pixel minimum guarantees a height while still allowing rows to grow for longer content.
The responsive pattern deserves to be better known. With auto-fit and minmax, the number of columns follows the available width. A gallery shows five columns on a desktop monitor, three on a tablet and one on a phone, with no breakpoints to maintain. The generated code also guards the minimum with min(…, 100%), so a column never becomes wider than a very narrow screen.