Material-ui: [Grid] CSS grid support

[tanekim77]

CSS-Grid is now newer and better grid system than flexbox, but they can be used together. Please see the link:
https://css-tricks.com/snippets/css/complete-guide-grid/
And it's now supported by most browsers, and it's matter of time it will become the standard way of defining the grid layout.
Would Material UI implement CSS Grid as well for incoming updates?

Benchmark

• https://styled-css-grid.js.org/
• https://github.com/twbs/bootstrap/pull/31813 and the preview.

[oliviertassinari]

@tanekim77 Hey, thanks for opening this issue.

Would Material UI implement CSS Grid as well for incoming updates?

I think that we should look into providing an abstraction if we have the opportunity to make the life simpler for our users. I don't have enough experience with CSS Grid to provide an answer know. We would love to hear what others think about it, and how they think we can make everybody life simpler.

[nabrach]

I think CSS Grid is easy enough to implement on it's own. No need to include it as a part of Material UI.

[mbrookes]

Our Grid component will need to continue to use flexbox for the forseeable. Only 76% of browsers in use globally support grid. I'd suggest we mark "wontfix", and revisit in a few years time.

[oliviertassinari]

Some people target evergreen browsers. I don't think it should block us from studying the potential of this proposal.

[mbrookes]

@oliviertassinari flexbox is working just fine forGrid, and has relatively broad browser support. Since we can't yet replace flexbox with grid, to use grid would mean introducing a second grid system in parallel with Grid. That doesn't seem like a good use of time.

[oliviertassinari]

@mbrookes I don't think that the issue is about replacing the flexboxs system. It's about the potential of solving more problems thanks to CSS grid.

[mbrookes]

I don't think that the issue is about replacing the flexboxs system.

Yes, that's what I said. "we can't yet replace flexbox with grid". (due to the fact that a significant proportion of browsers in use don't yet support grid.

So, since we can't replace it, what you to be seem proposing is to intruduce a second Grid system using grid in parallel to the existing one. This, as I said, "doesn't seem like a good use of time.".

For a long time you resisted having any Grid component, so I'm surprised you're advocating have two!

[oliviertassinari]

@mbrookes I'm not advocating for increasing the API surface, you damn right on this. No, I'm just curious about the potential of CSS grid. I just want to keep an open mind state. I have seen many people excited about it, but I'm having a hard time understanding why that much.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as I'm not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[mbrookes]

@oliviertassinari CSS grid is the "right" way to implement a grid system, with flexbox being more appropriate for component-level layout. I've been around long enough to remember pre-table layout challenges, and the abuse of table for layout,so it is exciting that we finally have an appropriate solution (hard to believe it's taken this long!).

However, just as it took many years before flexbox stabilised and reached critical mass in terms of browser support, it will be a few years before grid is widely supported. For example, I have a 3rd gen iPad that is perfecty functional, but no loger recieves updates. It will sadly never support grid. Thanks Apple! (Also have a 1st gen iPad, but that's more of a museum piece, so fair enough!)

It's right to consider when to support CSS grid, but we have to be pragmatic about the practicality of using it (given relatively limited broswer support), when flexbox is serving us well for now.

[evdama]

It's now about one year after this discussion came to a halt. Both arguments are valid and true. Sooner or later CSS grid will be the norm (is it already?). I guess it's worth another thought now.

[mbrookes]

Not yet:

Global: 85.36% + 2.93% = 88.3%
unprefixed: 85.36%

https://caniuse.com/#feat=css-grid

[dmwyatt]

At which percentage of browser support will it be considered the norm? It's at 90% now.

Also, I wanted to point out that the docs site is a little confusing on this issue.

In the middle of the page discussing MUI's grid, there's this big heading and paragraph talking about CSS grid. I _think_ the point is that you can also use CSS Grid, but MUI does not provide any sort of abstraction over it, but this is not explicitly stated anywhere and it seems like a discombobulating location to put this info even if it is explicitly stated.

[oliviertassinari]

At which percentage of browser support will it be considered the norm?

@dmwyatt The question to ask is whether the browsers we officially support have the feature or not. Chrome 49 support seems to be the only bottleneck. Also, please consider that Google Bot uses Chrome 41 for rendering your page. Anyway, we might be able to use CSS Grid internally.

I wanted to point out that the docs site is a little confusing on this issue.

I agree, do you want to clarify this documentation section? :)

How do you think that we could leverage the CSS Grid?

[dmwyatt]

I agree, do you want to clarify this documentation section? :)

Sure, I'll take a crack at it.

[goszczynskip]

@oliviertassinari Google recently announced that their bot was updated to evergreen: link.

[oliviertassinari]

We recently had an issue about somebody having broken rendering with Google because of a new non supported JavaScript feature. Maybe Google has updated their bot but not their crawl inspection tool. I guess it will soon follow.

[oliviertassinari]

~I believe that we already have an open issue to bring CSS Grid in the project.~

[numToStr]

@oliviertassinari Is this still on the roadmap?

[stfenjobs]

2020-10-27：

https://caniuse.com/css-grid

[stfenjobs]

2020-11-18： 96.09%

https://caniuse.com/css-grid

[oliviertassinari]

We have started to benchmark our options in https://trello.com/c/Ons9dvi8/2214-css-grid. I have updated the issue description to include these sources. A 👍 on the issue's description always helps to increase its priority.