CSS Grid Generator
CSS Grid Generator - a browser-based developer tools utility.
Browser tool
About CSS Grid Generator
Grid is the first CSS layout system that lets you place things in two dimensions at once, and the first that is genuinely hard to hold in your head. Building the tracks visually and reading back the rules is the quickest way to make it click. Free to use, with nobody to register with. The layout is computed online in this page and never uploaded.
How to use it
- Define the tracksHow many rows and columns, and how each is sized — a fixed width, a fraction of what is left, or sized to its content.
- Set the gapsGrid has proper gutters, so spacing no longer needs margins on children that then have to be cancelled at the edges.
- Place items across cellsAn item can span several tracks, and the generated rule reflects whatever arrangement you build.
- Copy the CSSThe container rules and the placement for each item, ready to paste.
What fr actually means
A fraction unit distributes the space that remains after fixed tracks and gaps are subtracted. 1fr 2fr splits that leftover one third to two thirds, which is why mixing 200px with 1fr behaves sensibly: the fixed track takes its 200 pixels and the fraction takes everything else. It is not a percentage, and that difference is what makes it survive a gap being added.
Where minmax and auto-fit earn their keep
repeat(auto-fit, minmax(220px, 1fr)) produces a responsive grid with no media queries at all: as many columns as fit at 220 pixels minimum, each sharing the remainder equally. That one line replaces the stack of breakpoints a float or flex layout would need.
What it does not do
- Grid controls layout, not source order. Rearranging items visually while leaving the markup alone separates what a screen reader announces from what a sighted user sees, and that is an accessibility problem rather than a clever trick.
- Subgrid support is newer than the rest and worth checking before relying on it.
Questions people ask
- Should I use grid or flexbox?
- Grid when you are arranging in two dimensions and the container should decide the layout. Flexbox when you have a single row or column and want the items to distribute themselves. They are complementary, and most real pages use both.
- How do I make a grid responsive without media queries?
- repeat(auto-fit, minmax(<min>, 1fr)) on the columns. The browser fits as many tracks as it can at the minimum width and shares the remaining space between them, reflowing continuously rather than at fixed breakpoints.
Questions about ToolsVerse itself — privacy, cost, what happens to your files — are answered in the frequently asked questions.
Related tools
The tools people most often need alongside CSS Grid Generator.
Can’t find the tool you need?
Tell us what you’re looking for and we’ll consider adding it.