You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.
discussion
Would you recommend this product?
6 Reviews5.0/5
Sarah Drasner
Maker
Head of Developer Experience at Netlify
I'm the person who made this and someone asked me to claim it, how do I do so? New to ProductHunt. Thanks!
Upvote (7)
Share
Ryan Hoover
Founder, Product Hunt
@sarah_drasner welcome, Sarah! 👋🏼 You should be tagged as the maker now.
Upvote (5)
Share
Sarah Drasner
Maker
Head of Developer Experience at Netlify
@rrhoover thanks Ryan!
Upvote (1)
Share
Chuck GrimmettProduct manager at Crash
This is really useful as both a generator and a learning tool. It bridges the gap between what you can draw on paper and the code you can write. As someone who only uses CSS Grid occasionally and forgets the syntax, this is very helpful. I know what I want visually, and this makes it simple to both turn into code and check my mistakes.
Upvote (4)
Share
Ferminrp
Hunter
Found this on Twitter. Huge time saver ❤
Upvote (3)
Share
@ferminrp I saw this on Twitter and then later the same day shared to slack. Happy about seeing it on product hunt as well. Yea to Sarah Drasner and excited to finally figure out grid layout!
Upvote (1)
Share
Stephen ParkerVirtual Assistant, Zirtual

Nothing else to share!

Pros:

Great design Gives younger developers a good example of CSS Grid concepts, with a visual component

Cons:

None that I've seen as of yet

Upvote (2)
Share
Aaron O'Leary
Community @producthunt. Chef.
This is such a huge time saver, especially when if you're like me and you just hate anything CSS
Upvote
Share