Hacker News Reader

Hacker News

Comment by reaperducer | Hacker News Reader

Full thread

reaperducer

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

View on HN

not exactly what you're looking for but kind of close

http://flexboxfroggy.com/

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.

Grid can also be amazing for dynamic number of elements! Check this out: https://gridbyexample.com/examples/example17 Grid has an amazing repeat feature: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat Very powerful.

Implicit item positioning is a hallmark of CSS 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.

Browser support as well. Grid is only about <90% covered.

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

Thanks for this :)

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.

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.

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.

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

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:

    <div style="display:flex; justify-content:space-between">
      <div>Left</div>
      <div>Right</div>
    </div>

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:

    <div style="display:grid; grid:auto/repeat(auto-fit,minmax(min-content,0)); justify-content:space-between;">
      <div>Left</div>
      <div>Right</div>
    </div>

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.

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

Reply on news.ycombinator.com