About CSS Grid Generator
CSS Grid Generator is a visual tool for building CSS grid layouts. You set the columns, rows and gaps, and the tool shows the result as you change them.
What it does
You choose a number of columns and rows, then set the gap between them in pixels. The grid updates as you change the values, so you can see the layout before you write any code. When you are happy with it, you can copy the CSS. A reset button clears the grid so you can start again.
Key features
- Set columns and rows visually
- Adjust column and row gaps in pixels
- Copy the generated CSS for the grid
- Reset the grid to start again
Who it's for
The tool suits front-end developers and students who are learning CSS grid. It is also useful for designers who want to test a layout quickly before handing it to a developer, since the result can be checked in a browser.
Pricing and good to know
The project is open source under the MIT licence, and the source is on GitHub. It runs in the browser and does not need an account. The tool covers basic grids, so for complex or responsive layouts you will still need to write and test your own CSS.
Highlights
- Set the number of columns and rows
- Adjust column and row gaps in pixels
- Copy the generated CSS for the grid
- Reset the grid to start again
