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!
Show HN: Layoutit – An interactive CSS Grid generator
41–50 of 75 posts
Re: Show HN: Layoutit – An interactive CSS Grid generator
#42Very 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/
Re: Show HN: Layoutit – An interactive CSS Grid generator
#43The site is great, but the name of the domain is unfortunate
“I’ll take ‘L.A., You tit’ for $1000”
Re: Show HN: Layoutit – An interactive CSS Grid generator
#44Re: Show HN: Layoutit – An interactive CSS Grid generator
#45If 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?
(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.
Re: Show HN: Layoutit – An interactive CSS Grid generator
#46Earlier quoted context omitted.
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
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 va…
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.
Re: Show HN: Layoutit – An interactive CSS Grid generator
#47Earlier quoted context omitted.
Is there a case you would prefer Flexbox over Grid?
(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.
Re: Show HN: Layoutit – An interactive CSS Grid generator
#48This 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…
Re: Show HN: Layoutit – An interactive CSS Grid generator
#49Earlier quoted context omitted.
Is there a case you would prefer Flexbox over Grid?
Browser support as well. Grid is only about https://caniuse.com/#feat=css-grid