So, at the moment, it seems like you can't go anywhere on the web without seeing articles, tutorials and snippets about CSS grid.

With this in mind, I've put together a simple tool which aims to help developers of all skill levels and experience to generate some quick boilerplate code for their projects that need layouts powered by CSS grid.

So why did I make this? Cssgr.id was created out of necessity for me and my own projects. I found myself looking to use CSS grid based layouts in a number of different projects and when these projects started to require more complex layouts (requiring multiple column and row spans) I found it took me quite a long time to generate just the base code for the grid.

I wanted a way to create my layouts visually, grab some mark up and build upon it afterwards.

So what can it do? (at the moment)

At the moment you can do the following:

Choose the number of grid items

Set the number of columns for the grid

Control the grid gap between items

Set the max width of the entire grid

Toggle lorem ipsum text within the grid items

Set howe many columns an individual grid item can span

Set how many rows an individual grid item can span

Get the HTML and CSS code for the grid you've created

What will it do? (in the future...)

In the future I'm looking to add more and more features, including but not limited to:

Setting the alignment of grid item content using align-content and justify-content properties

Allow the option to use grid-auto-flow

Allow the option to set min and max width of grid items

Create inline-level grids using display:inline-grid

I'd love to know everyones thoughts on this tool and if you think you will find it useful either now or in the future with your projects?

There are plenty of bugs in here I'm sure so if you see any just let me know and I'll aim to fix them when I can!

cssgr.id