Generate a CSS grid layout
Design CSS Grid layouts visually: columns, rows, track sizes, gaps and item placement with live preview. Copy the CSS. Free and in your browser.
- Files never leave your device
- Free, no sign-up
- No watermark
About CSS Grid Generator
Build two-dimensional layouts with CSS Grid without memorising the syntax. Add columns and rows, set track sizes with fr, px, auto or minmax, adjust column and row gaps, align items, and place grid items across cells. The preview updates as you work, and the generated CSS is ready to paste into your project.
How to use CSS Grid Generator
- 1
Add columns and rows and set their sizes.
- 2
Adjust gaps and alignment.
- 3
Place items across cells.
- 4
Copy the generated CSS.
Why use this tool
- Visual column and row editor.
- fr, px, auto and minmax track sizes.
- Gap and alignment controls.
- Item placement across cells.
- Copy-ready CSS.
Frequently asked questions
fr is a fraction of the free space. Three 1fr columns share the width equally.
For layouts with rows and columns, such as page structures, galleries and dashboards.
Yes. repeat(auto-fit, minmax(200px, 1fr)) creates columns that wrap automatically.
Yes. Use Grid for the page layout and flexbox inside components.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The CSS Grid Generator gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- Flexbox PlaygroundBuild flexbox layouts visually: direction, wrap, justify, align and gap for the container and items, with live preview and copyable CSS.
- CSS to Tailwind ConverterPaste CSS properties and get the equivalent Tailwind CSS utility classes instantly, ready to copy into your markup.
- Aspect Ratio CalculatorCalculate aspect ratios, keep proportions when resizing and copy the CSS.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.