[Grid] CSS grid support

[tanekim88]

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?

Problems it could solve

• Remove the need for negative paddings.
• Works better for page layouts when the HTML is streamed in chunks which creates layout shifts

Benchmark

• https://getbootstrap.com/docs/5.2/layout/css-grid/
• https://styled-css-grid.js.org/
• Add optional CSS grid twbs/bootstrap#31813 and the preview.
• https://primer.style/components/Grid
• https://orbit.kiwi/components/grid/react/
• https://twitter.com/jxnblk/status/1192475197963677698
• https://rsms.me/raster/, the announcement
• Do we even need a component for it? https://twitter.com/kyehohenberger/status/1138159733767098368
• https://trello.com/c/xHKY1cHg/1345-grid-css-grid

[oliviertassinari]

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

@tanekim77 I think that we should dive deeper into the potential of using CSS Grid. What can we improve?

EDIT:

The system allows using the CSS Grid properties with the sx prop and flattens props:

• https://next.material-ui.com/components/grid/#css-grid-layout
• https://next.material-ui.com/system/grid/

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

[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]

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.

[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?

[goszczynskip]

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

[ghost]

2020-11-18： 96.09%

https://caniuse.com/css-grid

[oliviertassinari]

@jrhager84 Not sure yet. At least, we have a clean new demo for it: https://next.material-ui.com/components/grid/#css-grid-layout

and https://next.material-ui.com/system/grid/

[oliviertassinari]

Regarding the next step on this issue, we have a couple of options:

1. We do nothing, per [Grid] CSS grid support #9513 (comment)
2. We change the underlying implementation of the Grid with CSS Grid. There are currently no open issues about problems that such a move would fix. As far as I can push the reflection, it could be about being "cleaner" e.g. if your component is named Grid, you might expect it to use CSS Grid.
3. We rename the Grid component to Flex for v6, and we implement a new Grid component using CSS Grid, maybe adding new system helper props.
4. Or else?

I personally suspect that a great path could be to:

• do some of 3 with CSS Grid helpers in the system (e.g. for rowSpan and columnSpan). It seems to be low-hanging fruit to simplify the DX with new shorthands.
• maybe rename the current Grid to Flex for clarity and add a new Grid component with the same API. Bootstrap provides the two options: https://getbootstrap.com/docs/5.1/layout/css-grid/.

I think that we can wait for feedback from the developers, to better understand the space of the pain.