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?
Show HN: Layoutit – An interactive CSS Grid generator
61–70 of 75 posts
Re: Show HN: Layoutit – An interactive CSS Grid generator
#62Re: Show HN: Layoutit – An interactive CSS Grid generator
#63Re: Show HN: Layoutit – An interactive CSS Grid generator
#64Earlier 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?
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
#65Re: Show HN: Layoutit – An interactive CSS Grid generator
#66Re: Show HN: Layoutit – An interactive CSS Grid generator
#67Nice 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.
Mainly just posted the link to share the knowledge :)
Re: Show HN: Layoutit – An interactive CSS Grid generator
#68Just 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.
Re: Show HN: Layoutit – An interactive CSS Grid generator
#69Earlier 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.
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.
Re: Show HN: Layoutit – An interactive CSS Grid generator
#70Just 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.