CSS Grid Generator
Draw a grid with the mouse for three screens at once and get ready CSS and HTML. The tool also checks whether the on-screen block order matches the markup order.
Every layout is already built for three screens. Adjust it to your needs — the switcher below only changes the current screen.
All three share the same markup; only the placement changes. That's how a responsive grid is written by hand.
As soon as a card stops fitting at this width, the browser drops a column.
Valid values include 1fr, 200px, 30%, auto, min-content, minmax(200px, 1fr).
Pick an area and draw across the cells with your mouse. Cyrillic is transliterated to Latin: the name goes straight into the CSS.
Fine tuning Collapse fine tuning
Element names build from it: .grid__header, .grid__main.
What to check
Markup
CSS
Same in SCSS Collapse SCSS
SCSS
Three layouts, not one
A grid almost never looks the same on a phone and on a large screen: a sidebar drops to the bottom on a narrow display, three columns collapse into one. Most generators hand you a single grid, and you write the media queries by hand. This tool gives you three layouts, switched by tab, and the output is code with the media queries already written. The breakpoints are adjustable in the advanced settings.
The area names are shared across all three layouts, so the markup stays the same. Only the placement changes, and that is exactly how an adaptive grid is written without a generator.
Visual order vs. markup order
Grid can place a block visually earlier than it appears in the HTML. It looks right to the eye, but the Tab key and a screen reader follow the markup, in a different order. You get a grid that looks correct and fails with a keyboard.
We compute the reading order for each layout, compare it to the order of blocks in the markup, and show what has come apart. None of the generators we reviewed had this kind of check.
Catch a broken area before it breaks the grid
An area in grid-template-areas must be rectangular. Draw an L-shape, and the browser throws away the entire property, placement included. There is no error message anywhere: not in the console, not in the developer tools, the grid just falls apart. We check that every area is rectangular and tell you how many cells it is short.
Cards that count their own columns
A separate grid pattern is repeat(auto-fit, minmax(…, 1fr)). The browser picks the number of columns itself: as soon as the cards stop fitting into the given width, a column disappears. Media queries are not needed at all for this grid. Some generators skip the pattern, and it is exactly the one used for product lists, article lists, and case galleries.
What comes next
You can turn the finished CSS into nested SCSS with the CSS to SCSS converter, pick colors with the palette from image tool, and run the assembled page through the HTML validity check.
Rate this tool
Help us get better
Tell us what was missing.
Other tools
HTML Special Characters
487 characters in twelve sections, with click-to-copy.
Visual HTML Editor
Type as in a text editor and get ready-made HTML.
HTML Color Codes
Color codes in HEX, RGB, HSL and HSB, with a contrast check
Glassmorphism CSS Generator
Frosted glass with a text readability check and a fallback
CSS to SCSS
Flat CSS becomes SCSS with nesting, and back, verified against your source.
CSS Gradient Generator
Gradients without a gray middle, with a text readability check
Box Shadow Generator
Layered shadows, previewed on two backgrounds with a visibility check
Color Converter
A color in ten notations, with sRGB and P3 coverage checks