WingNews logo WingNews GitHub [2]
top | item 17618059

Show HN: Layoutit – An interactive CSS Grid generator

437 points| rofko | 7 years ago |layoutit.com | reply

71 comments

order
[+] coding123|7 years ago|reply
Very nice - I feel like I just learned CSS Grid in like 2 seconds. Also learned about fr units:

https://alligator.io/css/css-grid-layout-fr-unit/

[+] rofko|7 years ago|reply
Thank you! CSS Grid is awesome.
[+] ArlenBales|7 years ago|reply
A lot of potential here to be the best CSS Grid visual editor, but there's some bugs to be ironed out for sure. Currently I can't finish my grid. I'm trying to increase the number of columns on my "Body" grid but when I hit the "Add" column button it's adding columns to my "Header" grid, despite my "Body" grid being selected. I also seem to be stuck in my "Body" grid and can't select other grids. Chrome 65 on Ubuntu.
[+] rofko|7 years ago|reply
We have just pushed an update that should fix this and other issues!
[+] rofko|7 years ago|reply
Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week.

Cheers

[+] amichal|7 years ago|reply
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
[+] dnadler|7 years ago|reply
This is cool, but I'm having a lot of trouble reshaping the grids, and editing things that I've already created.

For example, I can't click on certain elements, dragging to make something bigger actually makes it smaller, etc. This will be a really nice tool once the UI is ironed out.

[+] rhencke|7 years ago|reply
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. :)

[+] rofko|7 years ago|reply
Thank you! We'll work on those those UI bugs, the nested grids are a challenge.
[+] peterjonesio|7 years ago|reply
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

[+] ghostbrainalpha|7 years ago|reply
Do you actually use that tool?

It looks promising but I really don't like having to download software to make a web layout.

[+] okonomiyaki3000|7 years ago|reply
This is very helpful and hope you'll consider making a whole series of generators for the trickier parts of css for example: gradientit animatit transformtit flexboxtit box-shadowtit
[+] stuntkite|7 years ago|reply
This is super cool! Only sort of related, I wonder how long they stared at that name and that it had `tit` in it before they decided to go all lowercase because they thought it was funny. I can't imagine that discussion didn't happen while planning to launch this.

What's weird is that my eye sees the word `tit` before the rest of the context. I'm not a weird pervert or anything as far as I know. It actually does cut through the signal to noise in internet promo.

[+] mintplant|7 years ago|reply
I would've gone with "LayItOut". No rude implications, and it's catchier/actually makes sense as a verb phrase. Also, to "lay it out" means to tell the truth, and this is a WYSIWYG editor.
[+] pbhjpbhj|7 years ago|reply
What about expertsexchange.com .. what do you see there ;o)
[+] kjsthree|7 years ago|reply
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.
[+] rofko|7 years ago|reply
We'll be improving the mobile experience soon :)
[+] nicostouch|7 years ago|reply
I used to really love the bootstrap layoutit tool. Used that heaps in the past. Can you guys please make one for design systems (like Prime React, Element, Vue Admin etc) in React/Vue so you can visually build using components from those systems? That would be beyond amazing.
[+] werber|7 years ago|reply
https://codepen.io/werber/pen/oMGNQe

What I see in the editor is totally different than what comes over to codepen. Seems like this tool has some amazing potential!

[+] rofko|7 years ago|reply
CSS doesn’t allow selectors to begin with a number. We may add a warning or a workaround for this though!
[+] isostatic|7 years ago|reply
Meh, I'll just stick with <table>, and a few frames.

tries it out

Wow, that's amazing. I'm tempted to build a new gui right now to replace a rather long in the tooth linear divs.

[+] anonytrary|7 years ago|reply
It's really slow, especially when you get to 40x40-ish. Does something like this need to be that slow? I'm curious if there are more optimized solutions.
[+] filleduchaos|7 years ago|reply
I'm curious to know what sort of website layout requires a 40 x 40 grid.
[+] lbj|7 years ago|reply
Just use SabreCMS :) You can set up your grid in much the same way, then build a full blown webshop or site directly on top of that.