Layoutit
Dev tools
css grid generator
SHOW HN2018
How HN took it
9 positive, 9 neutral or asking, 2 mixed, 8 critical, out of 28 comments about the project. Thread score +0.07.
Idea: 5 for, 1 againstExecution: 1 for, 3 againstDesign: 2 for, 1 againstPerformance: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Visual click interactions for defining grid areas are good
From 2 comments
very nice. very good click interactions for defining a grid area
jordache on HNThis 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…
rhencke on HN
Helpful for learning CSS Grid
From 1 comment
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/
coding123 on HN
CodePen export is a useful feature
From 2 comments
I like the export to codepen feature. Anyone know how that works?
melvster on HNVery 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…
amichal on HN
Objections
Buggy when editing and reshaping nested grids
From 2 comments
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…
ArlenBales on HNThis 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…
dnadler on HN
Slow with large grids
From 1 comment
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.
anonytrary on HN
CodePen export does not match editor output
From 2 comments
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!
werber on HNVery 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…
amichal on HN
Not mobile friendly
From 1 comment
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.
kjsthree on HN
Domain name is unfortunate
From 2 comments
The site is great, but the name of the domain is unfortunate
orliesaurus on HNThis 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…
stuntkite on HN
Requests
Add Flexbox generator
From 2 comments
If you're taking requests, a similar page for Flexbox would be the bee's knees.
reaperducer on HNMixing in flexbox would be nice...
zmix on HN
Generators for other CSS features like gradients and shadows
From 1 comment
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…
okonomiyaki3000 on HN
Support for component design systems
From 1 comment
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…
nicostouch on HN
Questions
Browser support for CSS Grid and IE
From 2 comments
IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.
zlepper on HNBrowser support as well. Grid is only about <90% covered. https://caniuse.com/#feat=css-grid
sarreph on HN
Does CSS Grid support size transition animations
From 1 comment
Does CSS grid support size transition animations?
ak39 on HN
Alternatives named
cssgrid.cc
From 1 comment
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
peterjonesio on HN
Flexbox Froggy
From 1 comment
not exactly what you're looking for but kind of close http://flexboxfroggy.com/
gr3yh47 on HN
gridbyexample.com
From 1 comment
Grid can also be amazing for dynamic number of elements! Check this out: https://gridbyexample.com/examples/example17 Grid has an amazing repeat feature:…
molszanski on HN