6 ms·

Best Practices with CSS Grid Layout

163 points by fagnerbrack 8y ago

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?
AWebOfBrown 8y ago
Is it still the case that one realistically needs to write their layout in flexbox as a fallback? Last I checked grid support was about 87% globally. I learned grid at one point but then just ignored it on the basis that if I had to write everything in flexbox already, why do both? Would love to know if this is a false assumption.
- sbouafif 8y ago
  It was still true 2 months ago. I did the same as you and stop using it. Here's a list of existing bugs that prevent me using it in production https://github.com/rachelandrew/gridbugs https://github.com/rachelandrew/gridbugs
- Bogdanp 8y ago
  Depending on your use case, you might get away with building your layout for mobile and then grid-ifying it for larger devices. That way those browsers that don't support grid will get the mobile version.
  - sametmax 8y ago
    Really nice idea. Never though about this one. And since mobile browser are usually the ones with old engines, it make sense twice.
- modernerd 8y ago
  Use a simple mobile-first layout, then add "@supports (display: grid)" to enhance the layout for browsers that support grid. Mobile OS browsers and IE 10 will get a usable experience that way without having to write flexbox fallbacks. “Internet Explorer + CSS Grid????” https://www.youtube.com/watch?v=7msERxu7ivg https://www.youtube.com/watch?v=7msERxu7ivg MDN: Using feature queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement#Using_feature_queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
  - merb 8y ago
    > “Internet Explorer + CSS Grid????” well the original css grid spec actually did came from microsoft (https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/) That's why it's only partial supported, they never updated it to the current version.
omribahumi 8y ago
I don’t write client side browser code these days any more, but when I did back in the 2000s, I remember people bashing using tables for layout, and how everyone should switch to CSS. From quick googling of what CSS Grid Layout is, seems to be like we’re back to using tables, we just offload it to the style sheet.
- mattmanser 8y ago
  The tables bashing was because it resulted in tag soup, even though it was conceptually easy. This doesn't suffer from the same problem.
  - omribahumi 8y ago
    So they should’ve added new tags for layout, instead of table,tr,td,th ? Much like yield vs await in Python3 asyncio. In the Python 2.7 days, people used generator functions to implement async in Python. When Python3 first came out, you couldn’t do both generator and async in the same function. I assume it’s because they used the same mechanism internally. I think it was Python 3.5 which added support for async generators.
    - repsilat 8y ago
      I think the philosophical difference is meant to be that in HTML tables the layout was part of the markup (and so had -- or should have had -- semantic meaning) whereas with CSS Grid the table layout is part of the styling. This is alluded to in TFA's section on accessibility. For devs who don't care so much about accessibility, and are more just interested in getting the layout they want, I guess that argument may not resonate so much. I personally don't care much for taxonomic/teleological arguments around REST methods, but I'm a bit more willing to follow fashion with Grid if it means people on screen-readers will have a better time.
    - gwillz 8y ago
      I don't believe python 2.7 could ever do async. Async was only possible in 3.3 when `yield from` landed and then was bastardized into coroutines through decorators. 3.5 released true asnyc/await based on the `yield from` form and then 3.6 allowed for async generators. You were close and your point remains. Although I don't think new tags are the right choice. I think HTML learnt a while ago that more tags doesn't solve everything. I do really enjoy python async. It's cool to see a feature develop from a hack like that but a language first approach could have avoided some headaches. This is where Grid wins, it's a fresh take without requiring to maintain backwards compatibility with previous attempts.
rsoto 8y ago
I'm reading the comments and I think there's a lot of misunderstanding about what CSS Grid is. Mostly because the spec is big and there's not just one way to do things, so it gets mixed with flexbox and tables. I recommend watching last year's Morten's CSS grid presentation[1] as it has convinced me to stop using other layouts/frameworks and just embrace grid, which is truly amazing and it has been a blast working with it and making responsive websites without worrying too much about the markup. 1: https://www.youtube.com/watch?v=txZq7Laz7_4 https://www.youtube.com/watch?v=txZq7Laz7_4

163 points by fagnerbrack 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?

AWebOfBrown 8y ago

Is it still the case that one realistically needs to write their layout in flexbox as a fallback? Last I checked grid support was about 87% globally. I learned grid at one point but then just ignored it on the basis that if I had to write everything in flexbox already, why do both? Would love to know if this is a false assumption.

sbouafif 8y ago
It was still true 2 months ago. I did the same as you and stop using it. Here's a list of existing bugs that prevent me using it in production https://github.com/rachelandrew/gridbugs https://github.com/rachelandrew/gridbugs
Bogdanp 8y ago
Depending on your use case, you might get away with building your layout for mobile and then grid-ifying it for larger devices. That way those browsers that don't support grid will get the mobile version.
- sametmax 8y ago
  Really nice idea. Never though about this one. And since mobile browser are usually the ones with old engines, it make sense twice.
modernerd 8y ago
Use a simple mobile-first layout, then add "@supports (display: grid)" to enhance the layout for browsers that support grid. Mobile OS browsers and IE 10 will get a usable experience that way without having to write flexbox fallbacks. “Internet Explorer + CSS Grid????” https://www.youtube.com/watch?v=7msERxu7ivg https://www.youtube.com/watch?v=7msERxu7ivg MDN: Using feature queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement#Using_feature_queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
- merb 8y ago
  > “Internet Explorer + CSS Grid????” well the original css grid spec actually did came from microsoft (https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/) That's why it's only partial supported, they never updated it to the current version.

omribahumi 8y ago

I don’t write client side browser code these days any more, but when I did back in the 2000s, I remember people bashing using tables for layout, and how everyone should switch to CSS. From quick googling of what CSS Grid Layout is, seems to be like we’re back to using tables, we just offload it to the style sheet.

mattmanser 8y ago
The tables bashing was because it resulted in tag soup, even though it was conceptually easy. This doesn't suffer from the same problem.
- omribahumi 8y ago
  So they should’ve added new tags for layout, instead of table,tr,td,th ? Much like yield vs await in Python3 asyncio. In the Python 2.7 days, people used generator functions to implement async in Python. When Python3 first came out, you couldn’t do both generator and async in the same function. I assume it’s because they used the same mechanism internally. I think it was Python 3.5 which added support for async generators.
  - repsilat 8y ago
    I think the philosophical difference is meant to be that in HTML tables the layout was part of the markup (and so had -- or should have had -- semantic meaning) whereas with CSS Grid the table layout is part of the styling. This is alluded to in TFA's section on accessibility. For devs who don't care so much about accessibility, and are more just interested in getting the layout they want, I guess that argument may not resonate so much. I personally don't care much for taxonomic/teleological arguments around REST methods, but I'm a bit more willing to follow fashion with Grid if it means people on screen-readers will have a better time.
  - gwillz 8y ago
    I don't believe python 2.7 could ever do async. Async was only possible in 3.3 when `yield from` landed and then was bastardized into coroutines through decorators. 3.5 released true asnyc/await based on the `yield from` form and then 3.6 allowed for async generators. You were close and your point remains. Although I don't think new tags are the right choice. I think HTML learnt a while ago that more tags doesn't solve everything. I do really enjoy python async. It's cool to see a feature develop from a hack like that but a language first approach could have avoided some headaches. This is where Grid wins, it's a fresh take without requiring to maintain backwards compatibility with previous attempts.

rsoto 8y ago

I'm reading the comments and I think there's a lot of misunderstanding about what CSS Grid is. Mostly because the spec is big and there's not just one way to do things, so it gets mixed with flexbox and tables. I recommend watching last year's Morten's CSS grid presentation[1] as it has convinced me to stop using other layouts/frameworks and just embrace grid, which is truly amazing and it has been a blast working with it and making responsive websites without worrying too much about the markup. 1: https://www.youtube.com/watch?v=txZq7Laz7_4 https://www.youtube.com/watch?v=txZq7Laz7_4