
Show HN: Layoutit – An interactive CSS Grid generator - rofko
http://layoutit.com/grid
======
coding123
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/](https://alligator.io/css/css-grid-layout-fr-unit/)

~~~
Vinnl
For Firefox users: the Firefox developer tools also have an excellent grid
inspector [1] that is very helpful in understanding CSS Grid.

[1] [https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspecto...](https://developer.mozilla.org/en-
US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)

------
ArlenBales
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
We have just pushed an update that should fix this and other issues!

------
reaperducer
If you're taking requests, a similar page for Flexbox would be the bee's
knees.

~~~
asdojasdosadsa
Is there a case you would prefer Flexbox over Grid?

~~~
detaro
Flexbox generally is better if you have a dynamic number of elements. Grid
isn't a replacement for flexbox.

~~~
molszanski
Grid can also be amazing for dynamic number of elements! Check this out:
[https://gridbyexample.com/examples/example17](https://gridbyexample.com/examples/example17)
Grid has an amazing repeat feature: [https://developer.mozilla.org/en-
US/docs/Web/CSS/repeat](https://developer.mozilla.org/en-
US/docs/Web/CSS/repeat) Very powerful.

------
amichal
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](https://codepen.io/anon/pen/RBZOgv). I
had a Grid Gap of 10% for both rows and columns

~~~
xutopia
You have to name the grid elements yourself. Check the article here to see
what you do with those single periods.

[https://alligator.io/css/css-grid-layout-fr-
unit/](https://alligator.io/css/css-grid-layout-fr-unit/)

------
dnadler
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
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
Thank you! We'll work on those those UI bugs, the nested grids are a
challenge.

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

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

~~~
ghostbrainalpha
Do you actually use that tool?

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

~~~
peterjonesio
I agree I personally don't like to download offline tools for this sort of
work. I haven't used it for anything serious - I just took an overall look at
it after [https://wesbos.com/](https://wesbos.com/) gave it a shout out and
like you - decided it looked promising.

Mainly just posted the link to share the knowledge :)

------
okonomiyaki3000
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
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
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.

------
snowpanda
It won't load for me :(

Loading failed for the <script> with source
“[https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lod...](https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js”).

~~~
rofko
Try reloading without cache! That CDN should be working.

------
kjsthree
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
We'll be improving the mobile experience soon :)

------
nicostouch
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
[https://codepen.io/werber/pen/oMGNQe](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
CSS doesn’t allow selectors to begin with a number. We may add a warning or a
workaround for this though!

------
unicornporn
Would it be possible to build a simple layout with two columns and a footer
consisting of one column below? It seems the footer will also have to columns,
no matter how I do things.

~~~
rofrol
I've used the tool
[https://codepen.io/rofrol/pen/yqzrqa](https://codepen.io/rofrol/pen/yqzrqa)

------
isostatic
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
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
I'm curious to know what sort of website layout requires a 40 x 40 grid.

------
Edmond
whoa!!great to see these guys are still at it! I have kept an eye out for what
you might come up with next as I am interested in possibly integrating it for
Solvent:

[http://codesolvent.com/static-assets/gif-studio/ui-
builder/s...](http://codesolvent.com/static-assets/gif-studio/ui-
builder/shot.webm)

Kudos!!

------
melvster
I like the export to codepen feature. Anyone know how that works?

~~~
psetq
right click the button and `inspect` in firefox or chrome, it simply submits
the form immediately before the button markup using:

[https://blog.codepen.io/documentation/api/prefill/](https://blog.codepen.io/documentation/api/prefill/)

------
ak39
Does CSS grid support size transition animations?

~~~
blattimwind
> This does work but is so far only implemented in Firefox. Follow here for
> other browser updates. [https://codepen.io/matuzo/post/animating-css-grid-
> layout-pro...](https://codepen.io/matuzo/post/animating-css-grid-layout-
> properties)

~~~
ak39
Thanks.

------
lbj
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.

~~~
TomMarius
I just want a grid, not a CMS

------
zmix
Mixing in flexbox would be nice...

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

------
orliesaurus
The site is great, but the name of the domain is unfortunate

~~~
trumped
Do you see it everywhere?

~~~
orliesaurus
only when it's obvious: Lay-It-Out.com would have been a better domain name,
2001 style

~~~
trumped
lay what out?

------
agiledevers
Very nice tool!

