Is it possible to use CSS Grid in place of Material UI's grid component? [closed]

Question

The Material-UI Grid Component is based on flexbox and works very well. However, I'm trying to understand if there's any benefit to using it vs. CSS Grid, which is also very easy to use. I actually prefer CSS Grid, but I don't want to break the rest of the system by using it. Does it interfere with the rest of Material UI in any way?

Any insights? Thanks in advance.

Answer 1

The main benefit the Grid component provides (compared to using flexbox directly) is the convenience of the theme-based breakpoint props (xs, sm, md, etc.) for easily adjusting the number of grid columns for different screen widths. If you prefer CSS Grid (and you aren't trying to support IE 11) or using flexbox directly, there's no reason not to use it. Nothing in Material-UI cares about whether or not you are using the Grid component.

In my own application, there are many cases where Material-UI's Grid component easily provides the desired layout and we go ahead and use it, and there are other cases where Grid would just get in the way and we use flexbox CSS directly (at the moment, our app still supports IE 11 so we aren't ever using CSS Grid, though I look forward to the point in the future when we change our supported browsers so that we can use CSS Grid).