Introducing cssgr.id - an interactive CSS grid boilerplate code generator

Dan Netherton ๐Ÿ‘จโ€๐Ÿ’ป on April 24, 2018

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... [Read Full]
markdown guide
 

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

 

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

another suggestion โ€“ have some common layouts selectable as starting point.

๐Ÿ‘

 

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%.

 

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

 

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

 
 
 

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 cssgr.id that we can submit bug reports to?

 

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 ๐Ÿ˜‰).

 
 

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

 
 

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

 

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

 

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

 

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.

code of conduct - report abuse