Live data from Hacker News

Show HN: Layoutit – An interactive CSS Grid generator

layoutit.com

41–50 of 75 posts

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

#41
post #40

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!

CSS doesn’t allow selectors to begin with a number. We may add a warning or a workaround for this though!

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

#45

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?

(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

#46
post #31
post #29

Earlier 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…

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.

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

#47

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

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

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

#48

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…

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.

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

#49
post #24

Earlier 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

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

Post reply on HN