Is the CSS grid generator free?
Yes. It is completely free to use, with no signup, no account, and no paywall.
Can I use the generated CSS in commercial projects?
Yes. The CSS you copy from the tool is yours to use in any project, personal or commercial, with no attribution needed.
Does it stay local?
Yes. Everything runs in your browser, and nothing you configure is uploaded to a server.
How do I make this grid responsive?
Replace the fixed column count with an intrinsic one. Instead of repeat(3, 1fr), which is always three columns however narrow the screen gets, write repeat(auto-fit, minmax(200px, 1fr)). That tells the browser to fit as many columns as it can while keeping each at least 200 pixels wide, and to share the leftover space between them. The grid then goes from three columns to two to one entirely on its own, with no breakpoints and no media queries. It is the single most useful pattern in CSS grid.
My grid is overflowing its container. Why?
Because 1fr has a minimum size of auto, which means the track will not shrink below the intrinsic width of whatever is inside it. A long URL with no spaces, a wide image, or a table will force the column to be at least as wide as that content, and the grid overflows to the right. Change the track to minmax(0, 1fr), which sets the minimum to zero and lets the column shrink properly. This trips up nearly everyone at some point and the fix is almost always this.
What is the difference between auto-fit and auto-fill?
It only shows when there are fewer items than would fill a row. auto-fill keeps creating empty tracks to fill the available width, so four items in a six-column-capable grid leave two empty columns and the items stay narrow. auto-fit collapses those empty tracks to zero width, so the four items stretch to share the whole row. If you want cards to grow to fill the space, use auto-fit. If you want a consistent column rhythm even when the last row is short, use auto-fill.
Do I need to declare grid-template-rows?
Usually not. Grid generates implicit rows as it needs them, so if you define three columns and give it ten items, you automatically get four rows without saying anything. Declaring an explicit row count is only useful when you want to control those rows' heights. It also introduces a trap: if you fix the grid at two rows and a seventh item appears, it lands in an implicit row that none of your sizing applies to.
Grid or flexbox?
Grid when you are laying out in two dimensions and you want the tracks to control the items, which is the case for card galleries, dashboards, and page layouts. Flexbox when you are laying out along one axis and you want the items to control their own sizes, which is the case for toolbars, button rows, and navigation. The honest heuristic: if you are writing the same width on every child to make them line up, you wanted grid.