
Best Practices with CSS Grid Layout - fagnerbrack
https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/
======
rsoto
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)

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

~~~
modernerd
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_La...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement#Using_feature_queries)

~~~
deckard1
I think the point is, you have to write the fallback anyway. There really is
no "enhanced", as they are two different ways to reach the same solution. The
user won't notice a difference, and no sane person wants to do the same thing
twice just because one method is slightly cleaner.

This is why CSS grids have been a nonstarter for most of us.

~~~
modernerd
It depends if your use case accepts that a site can look different in older
browsers. You don't have to write a fallback if people are okay with that.

If your project's stakeholders are prepared to accept that IE 10/11 users
won't see the same as Chrome users (I use, “in the same way that those on
mobile won't see the same as those on desktop, older browsers such as IE 10
will also see a simpler layout”), then progressively enhancing a mobile layout
with CSS Grid is a fine approach.

I accept that this can't always be the case, though. But I don't consider CSS
Grid a non-starter for most sites. Browser support is now good enough that I
look to use it wherever possible, and try to educate people still stuck in
pixel-perfect across all devices -land.

------
yroc92
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
What does it make easy for you over flexbox?

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

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

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

