CSS grid generator
A visual column, row and gap editor with copyable CSS.
FreeRuns in your browserNo signupUpdated 2026-10-29
minmax(0, 1fr) stops long words from stretching a column wider than its share.
Preview
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, auto);
gap: 24px;
}<div class="grid"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div>
grid grid-cols-3 grid-rows-2 gap-[24px]
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This css grid generator lets you lay out a grid with sliders and watch numbered cells move, then copy the code. Set the number of columns and rows, the gaps between them, and how items align inside their cells. For layouts that are not equal columns, pick a preset such as sidebar plus content or auto-fit cards, or type your own grid-template-columns value. The output covers the CSS, matching HTML and Tailwind classes.
How to use it
- Pick a column preset, or leave Equal columns and set the count with the slider.
- Set the number of rows and the column and row gaps.
- Type a custom template if you need fixed and flexible tracks side by side, such as
240px 1fr. - Change align-items and justify-items to see how cells sit in their tracks.
- Copy the CSS, the HTML or the Tailwind classes.
How to read the result
The defaults give grid-template-columns: repeat(3, minmax(0, 1fr)) with gap: 24px. In a container 1000px wide the two gaps take 48px, and the remaining 952px is split three ways, so each column is about 317px. Using minmax(0, 1fr) rather than plain 1fr stops a long word or a wide image from forcing its column wider than the others.
Switch to Sidebar + content and the template becomes 240px 1fr. The sidebar is fixed at 240px, the gap takes 24px, and the content column gets the remaining 736px in that same container. On a narrower screen only the content column shrinks.
Auto-fit cards uses repeat(auto-fit, minmax(240px, 1fr)). The browser fits as many columns of at least 240px as the row allows and stretches them to fill it: four in an 1100px container, fewer on a tablet and one on a phone, with no media queries at all.
The Tailwind line uses the built-in grid-cols-3 where it can and an arbitrary value when the template is custom.
For a single row or column of items, try the flexbox playground. For a full layout system, see website design and development.
Questions
Frequently asked.
When should I use grid instead of flexbox?
Use grid when you are placing items in two dimensions, rows and columns at once, such as a page layout or a card gallery that must line up. Use flexbox for a single row or column where items should size to their content, such as a navigation bar or a group of buttons.
What is the difference between auto-fit and auto-fill?
Both create as many columns as will fit. When there are fewer items than columns, auto-fit collapses the empty tracks so the items stretch to fill the row, while auto-fill keeps the empty tracks and the items stay at their minimum width. For card grids auto-fit is usually what you want.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide