Show HN: Layoutit – An interactive CSS Grid generator (opens in new tab)

Unless what I'm laying out looks just like a grid, I pretty much always prefer Flexbox. For the majority of cases where I need to do some layout with CSS these days, an image of how to do it via flexbox effortlessly pops into my head. I think that's the key: the majority of layout scenarios can easily be reduced to placing a sliding sequence of items along a string of sorts. Once you understand how that simple model is parameterized (to configure spacing between/around items, how their heights/widths should adapt etc.), I'd say (in my experience anyway) something like 80% of layout scenarios have a simple solution in terms of it, to the point where no thought is even required (though I do still often have to look up parameter names [e.g. align-content vs align-items]! which is kind of annoying).

ljoshua7y ago

Here's a great explanation from Jen Simmons that really helped me understand the differences and respective strengths and weaknesses of each:

https://www.youtube.com/watch?v=hs3piaN4b5I

1 more reply

swaggyBoatswain7y ago

Grid suffers when you deal with things of unknown variable height and unknown number of child items.

I use a mix of flexbox and floats to achieve any desired layout for RWD

Grid only has 87% browser support

1 more reply

paulddraper7y ago

(1) In cases where you want good browser support.

(2) This is going to sound stupid...but if you don't have a grid. Flexbox is a more flexible tool in this more flexible case.

1 more reply

zlepper7y ago

IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.

1 more reply

orliesaurus7y ago· 4 in thread

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

hinkley7y ago

I can hear fake Sean Connery:

“I’ll take ‘L.A., You tit’ for $1000”

trumped7y ago

Do you see it everywhere?

orliesaurus7y ago

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

1 more reply

samstave7y ago

Layoutpenismightierthanthesword.com was taken.

coding1237y ago· 3 in thread

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/

Vinnl7y ago

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

keithnz7y ago

nah, this doesn't really let you do much with css grid and you don't really get to learn the power of it. If you want to learn it pretty quickly, try this...

https://learn.freecodecamp.org/responsive-web-design/css-gri...

rofkoOP7y ago

Thank you! CSS Grid is awesome.

stuntkite7y ago· 3 in thread

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.

mintplant7y ago

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.

memco7y ago

Maybe they should just go full hog and make this their mascot: https://en.wikipedia.org/wiki/Tit_(bird)

pbhjpbhj7y ago

What about expertsexchange.com .. what do you see there ;o)

ArlenBales7y ago· 2 in thread

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.

rofkoOP7y ago

We have just pushed an update that should fix this and other issues!

rofkoOP7y ago

Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week.

Cheers

peterjonesio7y ago· 2 in thread

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

ghostbrainalpha7y ago

Do you actually use that tool?

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

peterjonesio7y ago

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/ gave it a shout out and like you - decided it looked promising.

Mainly just posted the link to share the knowledge :)

ak397y ago· 2 in thread

Does CSS grid support size transition animations?

blattimwind7y ago

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

ak397y ago

Thanks.

lbj7y ago· 2 in thread

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.

TomMarius7y ago

I just want a grid, not a CMS

M_Bakhtiari7y ago

Go away, shill.

amichal7y ago· 1 in thread

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

xutopia7y ago

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/

rhencke7y ago· 1 in thread

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. :)

rofkoOP7y ago

Thank you! We'll work on those those UI bugs, the nested grids are a challenge.

snowpanda7y ago· 1 in thread

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

rofkoOP7y ago

Try reloading without cache! That CDN should be working.

kjsthree7y ago· 1 in thread

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.

rofkoOP7y ago

We'll be improving the mobile experience soon :)

werber7y ago· 1 in thread

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!

rofkoOP7y ago

CSS doesn’t allow selectors to begin with a number. We may add a warning or a workaround for this though!

unicornporn7y ago· 1 in thread

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.

rofrol7y ago

I've used the tool https://codepen.io/rofrol/pen/yqzrqa

anonytrary7y ago· 1 in thread

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.

filleduchaos7y ago

I'm curious to know what sort of website layout requires a 40 x 40 grid.

melvster7y ago· 1 in thread

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

psetq7y ago

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/

dnadler7y ago

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.

okonomiyaki30007y ago

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

nicostouch7y ago

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.

isostatic7y ago

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.

Edmond7y ago

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

Kudos!!

zmix7y ago

Mixing in flexbox would be nice...

jordache7y ago

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

agiledevers7y ago

Very nice tool!

j / k navigate · click thread line to collapse

71 comments

59 comments · 24 top-level

reaperducer7y ago· 9 in thread

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

gr3yh477y ago

not exactly what you're looking for but kind of close

http://flexboxfroggy.com/

asdojasdosadsa7y ago

Is there a case you would prefer Flexbox over Grid?

detaro7y ago

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

2 more replies

sarreph7y ago

Browser support as well. Grid is only about <90% covered.

https://caniuse.com/#feat=css-grid

1 more reply

westoncb7y ago

ljoshua7y ago

Here's a great explanation from Jen Simmons that really helped me understand the differences and respective strengths and weaknesses of each:

https://www.youtube.com/watch?v=hs3piaN4b5I

1 more reply

swaggyBoatswain7y ago

Grid suffers when you deal with things of unknown variable height and unknown number of child items.

I use a mix of flexbox and floats to achieve any desired layout for RWD

Grid only has 87% browser support

1 more reply

paulddraper7y ago

(1) In cases where you want good browser support.

(2) This is going to sound stupid...but if you don't have a grid. Flexbox is a more flexible tool in this more flexible case.

1 more reply

zlepper7y ago

IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.

1 more reply

orliesaurus7y ago· 4 in thread

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

hinkley7y ago

I can hear fake Sean Connery:

“I’ll take ‘L.A., You tit’ for $1000”

trumped7y ago

Do you see it everywhere?

orliesaurus7y ago

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

1 more reply

samstave7y ago

Layoutpenismightierthanthesword.com was taken.

coding1237y ago· 3 in thread

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/

Vinnl7y ago

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

keithnz7y ago

nah, this doesn't really let you do much with css grid and you don't really get to learn the power of it. If you want to learn it pretty quickly, try this...

https://learn.freecodecamp.org/responsive-web-design/css-gri...

rofkoOP7y ago

Thank you! CSS Grid is awesome.

stuntkite7y ago· 3 in thread

mintplant7y ago

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.

memco7y ago

Maybe they should just go full hog and make this their mascot: https://en.wikipedia.org/wiki/Tit_(bird)

pbhjpbhj7y ago

What about expertsexchange.com .. what do you see there ;o)

ArlenBales7y ago· 2 in thread

rofkoOP7y ago

We have just pushed an update that should fix this and other issues!

rofkoOP7y ago

Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week.

Cheers

peterjonesio7y ago· 2 in thread

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

ghostbrainalpha7y ago

Do you actually use that tool?

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

peterjonesio7y ago

Mainly just posted the link to share the knowledge :)

ak397y ago· 2 in thread

Does CSS grid support size transition animations?

blattimwind7y ago

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

ak397y ago

Thanks.

lbj7y ago· 2 in thread

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.

TomMarius7y ago

I just want a grid, not a CMS

M_Bakhtiari7y ago

Go away, shill.

amichal7y ago· 1 in thread

xutopia7y ago

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/

rhencke7y ago· 1 in thread

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

This is very cool, though. :)

rofkoOP7y ago

Thank you! We'll work on those those UI bugs, the nested grids are a challenge.

snowpanda7y ago· 1 in thread

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

rofkoOP7y ago

Try reloading without cache! That CDN should be working.

kjsthree7y ago· 1 in thread

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.

rofkoOP7y ago

We'll be improving the mobile experience soon :)

werber7y ago· 1 in thread

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!

rofkoOP7y ago

CSS doesn’t allow selectors to begin with a number. We may add a warning or a workaround for this though!

unicornporn7y ago· 1 in thread

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.

rofrol7y ago

I've used the tool https://codepen.io/rofrol/pen/yqzrqa

anonytrary7y ago· 1 in thread

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.

filleduchaos7y ago

I'm curious to know what sort of website layout requires a 40 x 40 grid.

melvster7y ago· 1 in thread

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

psetq7y ago

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/

dnadler7y ago

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.

okonomiyaki30007y ago

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

nicostouch7y ago

isostatic7y ago

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.

Edmond7y ago

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

Kudos!!

zmix7y ago

Mixing in flexbox would be nice...

jordache7y ago

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

agiledevers7y ago

Very nice tool!

j / k navigate · click thread line to collapse