Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Layoutit – An interactive CSS Grid generator

layoutit.com

Post reply on HN
Print view View original

31–40 of 75 posts

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

#31

Post by kilburn »

ljoshua wrote: post #29
asdojasdosadsa wrote: post #20

Earlier quoted context omitted.

Is there a case you would prefer Flexbox over Grid?

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

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

#32

Post by rofko »

rhencke wrote: post #2

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…

Thank you! We'll work on those those UI bugs, the nested grids are a challenge.

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

#35

Post by stuntkite »

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.

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

#37

Post by ArlenBales »

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.

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

#38

Post by rofko »

ArlenBales wrote: post #37

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.

Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week.

Cheers

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

#39

Post by ArlenBales »

swaggyBoatswain wrote: post #30
asdojasdosadsa wrote: post #20

Earlier quoted context omitted.

Is there a case you would prefer Flexbox over Grid?

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

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.

Post reply on HN