DEV Community

Cover image for Introducing - an interactive CSS grid boilerplate code generator
Dan Netherton πŸ‘¨β€πŸ’»
Dan Netherton πŸ‘¨β€πŸ’»

Posted on

Introducing - an interactive CSS grid boilerplate code generator

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? 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!

Top comments (17)

andy profile image
Andy Zhao (he/him)

This is awesome! I think putting a small link attributing yourself would be great. Key Values has a great one at the bottom of the page:
Key Values' website bottom page links to Twitter accounts

tbd profile image

Lovely webapp. I would love more contrast, even a white background – black text theme.

another suggestion – have some common layouts selectable as starting point.


dannetherton profile image
Dan Netherton πŸ‘¨β€πŸ’»

Great points. Thank you.

Regarding the contrast, I was thinking about this the other day as I'm sure it will fall short when it comes to accessibility.

And the common layouts will be added to the list of future features 100%.

illusionmh profile image

Thank you again for this tool, I hope it will be helpful to many people as a start point.

There is problem in MS Edge.
Click on "Get code" throws a exception
Exception in MS Edge debugger
Could be easily changed to className.

It is hard to see how items will align with content when.
Number of Items 8
Number of columns 3
Grid gap 10

For Item 1 set Column span 2 and Row span 2.
For Item 3 set Column span 1 and Row span 2.

It is hard to see how elements will overlap and "Lorem ipsum" text won't help here.
Resulted layout where hard to see overlap between Item 1 and Item 3

Is it possible to set something like min-height for items and increase it with when "row span" increased so it will be easier to see actual overlap?
Possible better solution

threedeeprinter profile image
Dan Benge

Thats awesome. I was thinking of doing something like this to be used to generate dashboard layouts. Each cell becoming a widget/component placeholder...

dannetherton profile image
Dan Netherton πŸ‘¨β€πŸ’»

That's a cool idea!

thecodingpanda profile image
Simon B

This is great, thanks Dan!

dannetherton profile image
Dan Netherton πŸ‘¨β€πŸ’»

Thanks Simon! πŸ‘πŸ»

jaycausing profile image

I just started playing around with CSS grids for my personal website last night, so I'm really glad to have seen this today 😁

Do you have a GitHub for that we can submit bug reports to?

dannetherton profile image
Dan Netherton πŸ‘¨β€πŸ’»

Awesome, I hope you find it useful.

Not currently on Github but for the mean time just drop me a DM on twitter with any bugs (I'm sure there are quite a few πŸ˜‰).

blackforestcode profile image
Nils Domin

Great, thanks!!! πŸ‘πŸ˜ƒ

rrackiewicz profile image

Seriously awesome! I can't wait to see how this evolves.

equinusocio profile image
Mattia Astorino

Nice tool man.

jemminger profile image
Jeff Emminger

Very nice! Is the UI using a framework or did you roll it yourself?

dannetherton profile image
Dan Netherton πŸ‘¨β€πŸ’»

All from scratch! Pulled out of my head. Need to improve it for accessibility though as it's not great in that area. Mobile needs a bit of love too

pwkeygen profile image
Trα»‹nh TΓ’m

How about not using a grid? I'm doing pretty ok without grid :) just plan flex box, (and max-width sometimes) :D

humzabaig profile image
Humza Baig

Love this. It made everything so much easier to get started! I was wondering if you'd make this an open-source project? I'd love to contribute in some way if I could.