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.
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.
Report
This is amazing. Saves so much time -- and for those not familiar with grid a perfect way to visually learn how to use it. Thanks @sarah_drasner ! Bookmarked.
@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!
Productive Twitter
Product Hunt
Productive Twitter
Crash
Productive Twitter
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
Open Startups
Product Hunt