7 ms·

Oh man if you like flexbox, I'd definitely take the time to really get in there on grid. Learning to mix the two together has been amazing.

• tenaciousDaniel 7y ago
  Yep. I was able to pull off a UI pattern that never would have been possible in legacy css. It's pretty rad.
  • chrismorgan 7y ago
    I’ll bite. In my experience, almost every case where CSS Grid has been touted as enabling something new was actually already possible with flexbox alone. Care to share your UI pattern that I gather uses Grid and Flexbox, and I’ll see if I can reasonably reproduce it without Grid?
    • rossy 7y ago
      I don't know what he's done, but I think an obvious use case is this grid list: https://codepen.io/anon/pen/xNNXBR https://codepen.io/anon/pen/xNNXBR Basically, a list of items arranged in a grid where the number of columns is dynamic depending on the width, items are wrapped dynamically from left to right, each column consumes the maximum amount of space, there's a fixed gap between columns, and the last row is aligned left, not stretched. I had to build one recently, and it was a perfect fit for grid.
      • codedokode 7y ago
        Cannot this be done with just floats or inline-blocks and percentage width? Unlike grid, it would work in a larger number of browsers. Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Because generally frontend devs simply copy the code from tutorial so if you don't include the fallback, they won't implement it.
        • lpa22 7y ago
          The support for grid is very good for the vast majority of modern applications[1], given its power and the things it can simplify that often require JS solutions otherwise 1. https://caniuse.com/#search=Grid https://caniuse.com/#search=Grid
        • rossy 7y ago
          Not if you want the columns to stretch to fill the remaining space, and you also want the number of columns to be dynamic. > Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Well, a sensible fallback for that grid list example would be to inline-blocks with a fixed number of columns.
          • codedokode 7y ago
            You make a number of columns dynamic by setting different percentage widths on different page sizes.
            • maaaats 7y ago
              But then it's responsive to the page size, not the container size. That's a small, but important difference. For instance, I recently made a component to be included on other pages at work. It had to look good no matter the size the page gave it. So they might put it into a 400px wide container, on a 1600px wide page. If I used vw or media queries to draw it based on page size, it would behave wrong.
              • SquareWheel 7y ago
                I was thinking about that problem earlier. Is there not a CSS unit for container size? If not, that seems like a very useful addition. Like a more embedded version of vw/vh.
                • ZeikJT 7y ago
                  Percent can be based on container depending on how the container size is set.
    • tenaciousDaniel 7y ago
      A horizontal list, where each item has variable width based on its content. Inside each item there is additional hidden content, which should factor also into the item width. The hidden content should display behind the primary content. When hovered, the hidden content will appear via an animated dropdown. The height of the content varies as well. Hopefully that makes sense.
    • keithjgrant 7y ago
      You can reproduce a fair bit of Grid using just Flexbox (and we did that for quite a while before Grid came along)—but it's going to be far more verbose, both your HTML and CSS, and probably more brittle and complicated to change. If you're setting precise sizes in flexbox, or very specific flex values, you're probably in Grid territory. Ideally, flexbox is best when you want things to stretch/shrink to fit and you want the items to determine their own sizes. Grid is best when you have a specific layout/sizes in mind, and you want to impose that layout onto the items.