News for hackers. Stuff that matters.
Re:Show HN: Layoutit – An interactive CSS Grid generator by coding123 on Thursday July 26, 2018 @11:42AM (#17618333)
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/

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by Vinnl on Thursday July 26, 2018 @12:27PM (#17618691)
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...

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by keithnz on Thursday July 26, 2018 @05:28PM (#17621369)
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...

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Thursday July 26, 2018 @03:41PM (#17620315)
Thank you! CSS Grid is awesome.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ArlenBales on Thursday July 26, 2018 @03:13PM (#17620080)
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.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Thursday August 09, 2018 @09:22AM (#17723930)
We have just pushed an update that should fix this and other issues!
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Thursday July 26, 2018 @03:23PM (#17620170)
Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week.

Cheers

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by reaperducer on Thursday July 26, 2018 @12:43PM (#17618811)
If you're taking requests, a similar page for Flexbox would be the bee's knees.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by gr3yh47 on Thursday July 26, 2018 @01:50PM (#17619339)
not exactly what you're looking for but kind of close

http://flexboxfroggy.com/

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by asdojasdosadsa on Thursday July 26, 2018 @01:13PM (#17619058)
Is there a case you would prefer Flexbox over Grid?
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by detaro on Thursday July 26, 2018 @01:14PM (#17619069)
Flexbox generally is better if you have a dynamic number of elements. Grid isn't a replacement for flexbox.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by molszanski on Thursday July 26, 2018 @02:14PM (#17619557)
Grid can also be amazing for dynamic number of elements! Check this out: https://gridbyexample.com/examples/example17 Grid has an amazing repeat feature: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat Very powerful.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by benjvmin on Friday July 27, 2018 @01:25AM (#17623652)
Implicit item positioning is a hallmark of CSS grid.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by sarreph on Thursday July 26, 2018 @01:50PM (#17619340)
Browser support as well. Grid is only about <90% covered.

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

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by keth on Thursday July 26, 2018 @04:38PM (#17620826)
I remember a video + blog post about this, and it was suggested to just ship a mobile layout for browsers that don't support css grid. At least for personal sites that seemed reasonable.

EDIT: https://m.youtube.com/watch?v=txZq7Laz7_4

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by sarreph on Thursday July 26, 2018 @08:48PM (#17622631)
Thanks for this :)
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by westoncb on Thursday July 26, 2018 @09:45PM (#17622858)
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).
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ljoshua on Thursday July 26, 2018 @02:18PM (#17619608)
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

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by kilburn on Thursday July 26, 2018 @02:49PM (#17619867)
TLDR: I don't think her examples are any good, so this clip gives the "rationale" behind it but no actual-world examples to really understand the differences.

I don't think the example she uses is a good one. That thing is obviously achievable using absolute positioning, which in this case is arguably easier and will give you much better browser support.

Also, the other examples she uses are really weird. Boxes of varying widths and heights. This is just not a thing in current websites.

The flexbox example where she ends up with 3 items on the first row and 4 on the second is just fantasy according to my experience. That would only work for a manually crafted page, whereas most websites with that much content items are auto-generated from some backend (even if it is markdown files in a static website generator). Otherwise please show me how can I achieve that effect with similarly sized items and how do I make it responsive.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ArlenBales on Thursday July 26, 2018 @03:59PM (#17620434)
Her examples look like those you can find over at gridbyexample.com. She's just showing what the differences are between Flexbox and CSS Grid, not real-world usage.

Responsiveness with Flexbox or CSS Grid is best achieved through media queries. You could make a really simple Flexbox or CSS Grid site with no media queries and have it be responsive, but if you want complicated layouts you'd make use of media queries. e.g. named grid-template-areas and media queries play really nice together.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by Kagerjay on Thursday July 26, 2018 @02:28PM (#17619674)
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

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ArlenBales on Thursday July 26, 2018 @03:25PM (#17620192)
Implicit grids are for unknown number of child items. See grid-auto-rows, grid-auto-columns, and grid-auto-flow.

I've been struggling to find use for Flexbox with CSS Grid. Flexbox is good for components still, but CSS Grid can do that stuff too and the automatic spacing with grid-gap is so damn appealing.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by paulddraper on Thursday July 26, 2018 @03:55PM (#17620403)
(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.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ArlenBales on Thursday July 26, 2018 @04:19PM (#17620618)
I actually think CSS Grid solves your #2. A lot of people who don't use grids were probably overwhelmed by all the grid libraries out there and the complexity and overhead of them. I made my own grids, if you could call them that, and then Flexbox showed up and everything became amazing and easier. Then CSS Grid showed up and said "You think Flexbox makes amazingly easy responsive layouts? Hold my beer."
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by paulddraper on Thursday July 26, 2018 @06:01PM (#17621685)
I might be a grid-noob, but let's take a super-duper common situation:

I want to left align one element and right align another, keeping them in the same row.

Flex makes this very easy:

    <div style="display:flex; justify-content:space-between">
      <div>Left</div>
      <div>Right</div>
    </div>
Does grid also make this easy?
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by Whitestrake on Friday July 27, 2018 @12:45AM (#17623509)
As another grid-noob, I thought I'd try to tackle this one. It seems to require only one additional style to define the grid:

    <div style="display:grid; grid:auto/repeat(auto-fit,minmax(min-content,0)); justify-content:space-between;">
      <div>Left</div>
      <div>Right</div>
    </div>
There's one gotcha: repeat() doesn't seem to accept min-content as its own value, so I had to use minmax(min-content,0).

It's strictly less effort to do this with flex, but I expect that as soon as you have more than two single-word divs as children, Grid becomes more useful.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by zlepper on Thursday July 26, 2018 @01:49PM (#17619333)
IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Friday July 27, 2018 @10:12AM (#17626083)
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.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by amichal on Thursday July 26, 2018 @11:51AM (#17618399)
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
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by xutopia on Thursday July 26, 2018 @12:00PM (#17618471)
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/

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by dnadler on Thursday July 26, 2018 @12:34PM (#17618739)
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.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rhencke on Thursday July 26, 2018 @11:36AM (#17618287)
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. :)

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Thursday July 26, 2018 @02:53PM (#17619899)
Thank you! We'll work on those those UI bugs, the nested grids are a challenge.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by peterjonesio on Thursday July 26, 2018 @11:54AM (#17618427)
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

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ghostbrainalpha on Thursday July 26, 2018 @02:03PM (#17619458)
Do you actually use that tool?

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

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by peterjonesio on Friday July 27, 2018 @04:29AM (#17624423)
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 :)

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by okonomiyaki3000 on Thursday July 26, 2018 @08:00PM (#17622421)
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
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by stuntkite on Thursday July 26, 2018 @03:11PM (#17620063)
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.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by mintplant on Thursday July 26, 2018 @04:35PM (#17620783)
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.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by memco on Thursday July 26, 2018 @06:25PM (#17621856)
Maybe they should just go full hog and make this their mascot: https://en.wikipedia.org/wiki/Tit_(bird)
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by pbhjpbhj on Thursday July 26, 2018 @05:10PM (#17621161)
What about expertsexchange.com .. what do you see there ;o)
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by snowpanda on Monday July 30, 2018 @01:23AM (#17642250)
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....

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Monday July 30, 2018 @07:13PM (#17649053)
Try reloading without cache! That CDN should be working.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by kjsthree on Thursday July 26, 2018 @11:59AM (#17618467)
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.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Thursday July 26, 2018 @03:01PM (#17619974)
We'll be improving the mobile experience soon :)
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by nicostouch on Thursday July 26, 2018 @10:27PM (#17623030)
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.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by werber on Thursday July 26, 2018 @03:26PM (#17620203)
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!

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofko on Thursday July 26, 2018 @03:33PM (#17620260)
CSS doesn’t allow selectors to begin with a number. We may add a warning or a workaround for this though!
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by unicornporn on Thursday July 26, 2018 @07:19PM (#17622235)
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.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by rofrol on Friday July 27, 2018 @02:33PM (#17628074)
I've used the tool https://codepen.io/rofrol/pen/yqzrqa
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by isostatic on Thursday July 26, 2018 @01:05PM (#17618992)
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.

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by anonytrary on Thursday July 26, 2018 @07:17PM (#17622218)
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.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by filleduchaos on Thursday July 26, 2018 @08:52PM (#17622648)
I'm curious to know what sort of website layout requires a 40 x 40 grid.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by Edmond on Thursday July 26, 2018 @12:32PM (#17618721)
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!!

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by melvster on Thursday July 26, 2018 @12:19PM (#17618632)
I like the export to codepen feature. Anyone know how that works?
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by psetq on Thursday July 26, 2018 @12:29PM (#17618708)
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/

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ak39 on Thursday July 26, 2018 @02:01PM (#17619444)
Does CSS grid support size transition animations?
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by blattimwind on Thursday July 26, 2018 @03:08PM (#17620046)
> 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...
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by ak39 on Friday July 27, 2018 @12:41AM (#17623497)
Thanks.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by lbj on Thursday July 26, 2018 @05:02PM (#17621099)
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.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by TomMarius on Friday July 27, 2018 @11:40AM (#17626763)
I just want a grid, not a CMS
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by M_Bakhtiari on Friday July 27, 2018 @05:18AM (#17624635)
Go away, shill.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by zmix on Thursday July 26, 2018 @07:13PM (#17622202)
Mixing in flexbox would be nice...
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by jordache on Thursday July 26, 2018 @12:02PM (#17618490)
very nice. very good click interactions for defining a grid area
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by orliesaurus on Thursday July 26, 2018 @12:33PM (#17618735)
The site is great, but the name of the domain is unfortunate
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by hinkley on Thursday July 26, 2018 @03:48PM (#17620354)
I can hear fake Sean Connery:

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

[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by trumped on Thursday July 26, 2018 @02:08PM (#17619503)
Do you see it everywhere?
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by orliesaurus on Thursday July 26, 2018 @03:11PM (#17620067)
only when it's obvious: Lay-It-Out.com would have been a better domain name, 2001 style
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by trumped on Friday July 27, 2018 @09:31PM (#17630946)
lay what out?
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by samstave on Thursday July 26, 2018 @12:39PM (#17618779)
Layoutpenismightierthanthesword.com was taken.
[ Parent | on HN ]
Re:Show HN: Layoutit – An interactive CSS Grid generator by agiledevers on Thursday July 26, 2018 @11:52AM (#17618408)
Very nice tool!
[ Parent | on HN ]