Show HN: Layoutit – An interactive CSS Grid generator

This is pretty slick. Nice job on visualizing CSS grids and their properties.

There are some really nice touches, like when you drag a grid boundary, it highlights the changing properties in green. I'd love to see that expanded to also highlight when you have an area selected - highlight on the side what rows/columns it is participating in.

There are a few things that would be nice to touch up - when you have a grid area at the top, and you attempt to create a grid inside it, the 'tabs' at the top left and top right get obscured behind the top header. A concept of a document outline on the left might be nice, too, to understand which grid exactly you are editing, when there are nested grids.

This is very cool, though. :)

Very helpful! I don't know much about css grid support but I played around with "Grid Gap" and got it working in your tool but when i exported it to a "CodePen" (awesome feature BTW) it didn't come over. The pen is https://codepen.io/anon/pen/RBZOgv. I had a Grid Gap of 10% for both rows and columns

Nice tool, will take a proper look at this later this evening.

Reminds me of this offline tool: https://cssgrid.cc/ which is also quite well rated

This looks great! Extra kudos for it working on mobile (iOS 11 anyway). I’m usually checking HN on my phone and these things rarely work there.

very nice. very good click interactions for defining a grid area