Live data from Hacker News

Show HN: Layoutit – An interactive CSS Grid generator

layoutit.com

61–70 of 75 posts

Re: Show HN: Layoutit – An interactive CSS Grid generator

#61

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

Is there a case you would prefer Flexbox over Grid?

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

Re: Show HN: Layoutit – An interactive CSS Grid generator

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

Re: Show HN: Layoutit – An interactive CSS Grid generator

#63
post #25

Does CSS grid support size transition animations?

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

Thanks.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#64

Earlier quoted context omitted.

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

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: Left Right Does grid also make this easy?

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:

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

Re: Show HN: Layoutit – An interactive CSS Grid generator

#65
post #21

Earlier quoted context omitted.

Is there a case you would prefer Flexbox over Grid?

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

Implicit item positioning is a hallmark of CSS grid.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#66
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

Re: Show HN: Layoutit – An interactive CSS Grid generator

#67

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

Do you actually use that tool? It looks promising but I really don't like having to download software to make a web layout.

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

Re: Show HN: Layoutit – An interactive CSS Grid generator

#69
post #22

Earlier quoted context omitted.

Is there a case you would prefer Flexbox over Grid?

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

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.

Post reply on HN