5 ms·

I've really enjoyed CSS Grid, to the point where I wonder how I ever got by without it. It makes managing complex layouts, or even simple, much easier to manage

by yroc92 8y ago

I've really enjoyed CSS Grid, to the point where I wonder how I ever got by without it. It makes managing complex layouts, or even simple, much easier to manage and control.

dfischer 8y ago
What does it make easy for you over flexbox?
- Deimorz 8y ago
  They serve different purposes, and you'll often want to use both for different pieces of the layout. Flexbox is for laying things out in one dimension, Grid is more for two-dimensional ones. This video might help show the difference (and all the Layout Land videos are great if you want to look more into CSS grid): https://www.youtube.com/watch?v=hs3piaN4b5I https://www.youtube.com/watch?v=hs3piaN4b5I
  - mephitix 8y ago
    I really don't get this argument. Not only is it easier IMO to layout things in one-dimension with CSS grid, but there are subtle bugs that occur on different platforms if you have Flexbox and Grid nested within each other. Just stick with Grid all the time and make your life easier.
    - jazoom 8y ago
      I often use flexbox just for this: display: flex; justify-content: center; align-items: center;
      - mephitix 8y ago
        I just change “flex” to “grid”. It has the same result and it can be grids all the way down. I’ve seen issues on mobile platforms when containing grids in flex boxes.
        jazoom 8y ago
        What kind of issues should I be looking out for? I've not seen them yet.
- mortenjorck 8y ago
  While the two have some divergence in what they are intended to solve for, grid-row-gap and grid-column-gap (or grid-gap) are the biggest day-to-day wins with grid. I had a fairly straightforward hack using negative margins and calc() to get spacing with flexbox, but the built-in support for it in grid makes it feel hacky and cumbersome to go back. Grid's fr (fractional) units also make the old percentage-based format for responsive sizing feel unwieldy in comparison.
  - mephitix 8y ago
    You get it. Grid-gap is so powerful and I can never go back to flexbox even for 1-dimensional stuff. My favorite is using minmax() to control responsive overflow.
andrei_says_ 8y ago
How do you approach IE11? Grid or fallback?

by yroc92 8y ago

I've really enjoyed CSS Grid, to the point where I wonder how I ever got by without it. It makes managing complex layouts, or even simple, much easier to manage and control.

dfischer 8y ago

What does it make easy for you over flexbox?

Deimorz 8y ago
They serve different purposes, and you'll often want to use both for different pieces of the layout. Flexbox is for laying things out in one dimension, Grid is more for two-dimensional ones. This video might help show the difference (and all the Layout Land videos are great if you want to look more into CSS grid): https://www.youtube.com/watch?v=hs3piaN4b5I https://www.youtube.com/watch?v=hs3piaN4b5I
- mephitix 8y ago
  I really don't get this argument. Not only is it easier IMO to layout things in one-dimension with CSS grid, but there are subtle bugs that occur on different platforms if you have Flexbox and Grid nested within each other. Just stick with Grid all the time and make your life easier.
  - jazoom 8y ago
    I often use flexbox just for this: display: flex; justify-content: center; align-items: center;
    - mephitix 8y ago
      I just change “flex” to “grid”. It has the same result and it can be grids all the way down. I’ve seen issues on mobile platforms when containing grids in flex boxes.
      - jazoom 8y ago
        What kind of issues should I be looking out for? I've not seen them yet.
mortenjorck 8y ago
While the two have some divergence in what they are intended to solve for, grid-row-gap and grid-column-gap (or grid-gap) are the biggest day-to-day wins with grid. I had a fairly straightforward hack using negative margins and calc() to get spacing with flexbox, but the built-in support for it in grid makes it feel hacky and cumbersome to go back. Grid's fr (fractional) units also make the old percentage-based format for responsive sizing feel unwieldy in comparison.
- mephitix 8y ago
  You get it. Grid-gap is so powerful and I can never go back to flexbox even for 1-dimensional stuff. My favorite is using minmax() to control responsive overflow.

andrei_says_ 8y ago

How do you approach IE11? Grid or fallback?