8 ms·

Show HN: Layoutit – An interactive CSS Grid generator

437 points by rofko 8y ago

rhencke 8y ago
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 8y ago
  Thank you! We'll work on those those UI bugs, the nested grids are a challenge.
coding123 8y ago
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 8y 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_Inspector/How_to/Examine_grid_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
- rofko 8y ago
  Thank you! CSS Grid is awesome.
- keithnz 8y 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-grid https://learn.freecodecamp.org/responsive-web-design/css-gri...
amichal 8y ago
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 8y 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/ https://alligator.io/css/css-grid-layout-fr-unit/
agiledevers 8y ago
Very nice tool!
peterjonesio 8y ago
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 8y 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.
  - peterjonesio 8y 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/ https://wesbos.com/ gave it a shout out and like you - decided it looked promising. Mainly just posted the link to share the knowledge :)
deleted 8y ago
[deleted]
kjsthree 8y ago
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 8y ago
  We'll be improving the mobile experience soon :)
jordache 8y ago
very nice. very good click interactions for defining a grid area
melvster 8y ago
I like the export to codepen feature. Anyone know how that works?
- psetq 8y 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/ https://blog.codepen.io/documentation/api/prefill/
Edmond 8y 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/shot.webm http://codesolvent.com/static-assets/gif-studio/ui-builder/s... Kudos!!
orliesaurus 8y ago
The site is great, but the name of the domain is unfortunate
- samstave 8y ago
  Layoutpenismightierthanthesword.com was taken.
- trumped 8y ago
  Do you see it everywhere?
  - orliesaurus 8y ago
    only when it's obvious: Lay-It-Out.com would have been a better domain name, 2001 style
    - trumped 8y ago
      lay what out?
- hinkley 8y ago
  I can hear fake Sean Connery: “I’ll take ‘L.A., You tit’ for $1000”
dnadler 8y 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.
reaperducer 8y ago
If you're taking requests, a similar page for Flexbox would be the bee's knees.
- asdojasdosadsa 8y ago
  Is there a case you would prefer Flexbox over Grid?
  - detaro 8y ago
    Flexbox generally is better if you have a dynamic number of elements. Grid isn't a replacement for flexbox.
    - molszanski 8y ago
      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.
    - benjvmin 8y ago
      Implicit item positioning is a hallmark of CSS grid.
  - zlepper 8y ago
    IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.
    - rofko 8y ago
      We offer some support for the previous version of the spec. In those cases you can add a media query to detect IE10+ and override some of the properties. It works well as a starting point for supporting the legacy grid. In our tests the positioning is working as expected, but the sizing units might need some tweaks. For me the biggest issue with IE grid is the lack of support for auto-positioning of elements. If you don't rely on that for your design you can support IE10+ pretty well.
isostatic 8y 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.
ak39 8y ago
Does CSS grid support size transition animations?
- blattimwind 8y 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-properties https://codepen.io/matuzo/post/animating-css-grid-layout-pro...
  - ak39 8y ago
    Thanks.
stuntkite 8y ago
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 8y 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.
- pbhjpbhj 8y ago
  What about expertsexchange.com .. what do you see there ;o)
- memco 8y ago
  Maybe they should just go full hog and make this their mascot: https://en.wikipedia.org/wiki/Tit_(bird) https://en.wikipedia.org/wiki/Tit_(bird)
ArlenBales 8y ago
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 8y ago
  Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week. Cheers
- rofko 8y ago
  We have just pushed an update that should fix this and other issues!
werber 8y ago
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 8y ago
  CSS doesn’t allow selectors to begin with a number. We may add a warning or a workaround for this though!
lbj 8y ago
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.
- M_Bakhtiari 8y ago
  Go away, shill.
- TomMarius 8y ago
  I just want a grid, not a CMS
zmix 8y ago
Mixing in flexbox would be nice...
anonytrary 8y ago
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 8y ago
  I'm curious to know what sort of website layout requires a 40 x 40 grid.
unicornporn 8y ago
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 8y ago
  I've used the tool https://codepen.io/rofrol/pen/yqzrqa https://codepen.io/rofrol/pen/yqzrqa
okonomiyaki3000 8y 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
nicostouch 8y 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.
dionna767675 8y ago
is the proven online destination for small business consulting and tools for small business owners and entrepreneurs. Founded in 1996 by Fran Tarkenton, we are driven by one goal: to help you start, run, and grow your business. After an 18 year career in the NFL that took him to the Hall of Fame, Fran dedicated his life to business, and over his 50 years as an entrepreneur he has built more than 20 successful companies from the ground up. GoSmallBiz’s powerful set of tools and services is based on his years of experience starting businesses to provide everything your small business needs learn how to earn real money click below for more information to apply http://gosmallbiz.club http://gosmallbiz.club
snowpanda 8y ago
It won't load for me :( Loading failed for the <script> with source “https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js” https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lod....
- rofko 8y ago
  Try reloading without cache! That CDN should be working.

437 points by rofko 8y ago

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

coding123 8y ago

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 8y 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_Inspector/How_to/Examine_grid_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
rofko 8y ago
Thank you! CSS Grid is awesome.
keithnz 8y 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-grid https://learn.freecodecamp.org/responsive-web-design/css-gri...

amichal 8y ago

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 8y 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/ https://alligator.io/css/css-grid-layout-fr-unit/

agiledevers 8y ago

Very nice tool!

peterjonesio 8y ago

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 8y 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.
- peterjonesio 8y 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/ https://wesbos.com/ gave it a shout out and like you - decided it looked promising. Mainly just posted the link to share the knowledge :)

deleted 8y ago

[deleted]

kjsthree 8y ago

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

jordache 8y ago

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

melvster 8y ago

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

psetq 8y 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/ https://blog.codepen.io/documentation/api/prefill/

Edmond 8y 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/shot.webm http://codesolvent.com/static-assets/gif-studio/ui-builder/s... Kudos!!

orliesaurus 8y ago

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

samstave 8y ago
Layoutpenismightierthanthesword.com was taken.
trumped 8y ago
Do you see it everywhere?
- orliesaurus 8y ago
  only when it's obvious: Lay-It-Out.com would have been a better domain name, 2001 style
  - trumped 8y ago
    lay what out?
hinkley 8y ago
I can hear fake Sean Connery: “I’ll take ‘L.A., You tit’ for $1000”

dnadler 8y 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.

reaperducer 8y ago

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

asdojasdosadsa 8y ago
Is there a case you would prefer Flexbox over Grid?
- detaro 8y ago
  Flexbox generally is better if you have a dynamic number of elements. Grid isn't a replacement for flexbox.
  - molszanski 8y ago
    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.
  - benjvmin 8y ago
    Implicit item positioning is a hallmark of CSS grid.
- zlepper 8y ago
  IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.
  - rofko 8y ago
    We offer some support for the previous version of the spec. In those cases you can add a media query to detect IE10+ and override some of the properties. It works well as a starting point for supporting the legacy grid. In our tests the positioning is working as expected, but the sizing units might need some tweaks. For me the biggest issue with IE grid is the lack of support for auto-positioning of elements. If you don't rely on that for your design you can support IE10+ pretty well.

isostatic 8y 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.

ak39 8y ago

Does CSS grid support size transition animations?

blattimwind 8y 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-properties https://codepen.io/matuzo/post/animating-css-grid-layout-pro...
- ak39 8y ago
  Thanks.

stuntkite 8y ago

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 8y 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.
pbhjpbhj 8y ago
What about expertsexchange.com .. what do you see there ;o)
memco 8y ago
Maybe they should just go full hog and make this their mascot: https://en.wikipedia.org/wiki/Tit_(bird) https://en.wikipedia.org/wiki/Tit_(bird)

ArlenBales 8y ago

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 8y ago
Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week. Cheers
rofko 8y ago
We have just pushed an update that should fix this and other issues!

werber 8y ago

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 8y ago
CSS doesn’t allow selectors to begin with a number. We may add a warning or a workaround for this though!

lbj 8y ago

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.

M_Bakhtiari 8y ago
Go away, shill.
TomMarius 8y ago
I just want a grid, not a CMS

zmix 8y ago

Mixing in flexbox would be nice...

anonytrary 8y ago

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

unicornporn 8y ago

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 8y ago
I've used the tool https://codepen.io/rofrol/pen/yqzrqa https://codepen.io/rofrol/pen/yqzrqa

okonomiyaki3000 8y 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

nicostouch 8y 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.

dionna767675 8y ago

is the proven online destination for small business consulting and tools for small business owners and entrepreneurs. Founded in 1996 by Fran Tarkenton, we are driven by one goal: to help you start, run, and grow your business. After an 18 year career in the NFL that took him to the Hall of Fame, Fran dedicated his life to business, and over his 50 years as an entrepreneur he has built more than 20 successful companies from the ground up. GoSmallBiz’s powerful set of tools and services is based on his years of experience starting businesses to provide everything your small business needs learn how to earn real money click below for more information to apply http://gosmallbiz.club http://gosmallbiz.club

snowpanda 8y ago

It won't load for me :( Loading failed for the <script> with source “https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js” https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lod....

rofko 8y ago
Try reloading without cache! That CDN should be working.