The Material-UI Grid Component is MUI’s grid system solution. It also has the features and APIs of MUI components that MUI users are familiar with. The question when considering using MUI Grid is: will this be superior to other grid alternatives?
YouTube video version of this article here: https://youtu.be/YO5jGf3_-gc
Flexbox, Bootstrap, and CSS Grid have proven their usefulness. Understandably, if you are already using Material-UI components, you may choose to use the Grid simply to maintain look and feel. If not, is the MUI Grid an attractive layout option?
Material-UI Grid vs Bootstrap for a simple fluid layout
Both Material-UI Grid and Bootstrap 4 are built using CSS’s Flexbox. Therefore, they can both implement vertical alignment, horizontal alignment, and other features of Flexbox. They also both implement a wrapping container with a 12 “column” system. The similarities are significant, but there are a few notable differences.
Material-UI Grid uses two “layout types”: containers and items. A container wraps a group of items, the items have their relative width set with attributes such as xs={6} sm={4} . Sounds kinda familiar.
Bootstrap has three layout items: containers, rows, and columns. Containers are equivalent in both libraries, and MUI Grid items === columns. The primary layout difference is that Bootstrap wraps each group of columns with <div class=”row”> . At first it seems a bit ‘div soup-y’, but it enables bootstrap to be a bit more controlled when shifting to smaller screen sizes, like so:
<div class="container">
<div class="row">
<div class="col-6 col-md-4">
Item 1
</div>
<div class="col-6 col-md-4">
Item 2
</div>
<div class="col-6 col-md-4">
Item 3
</div>
</div>
<div class="row">
<div class="col">
Row 2
</div>
</div>
</div>
Material-UI Grid can accomplish the same thing, but you’ll have to be more deliberate about the width of subsequent rows:
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={6} sm={4}>
<Paper className={classes.paper}>Item 1</Paper>
</Grid>
<Grid item xs={6} sm={4}>
<Paper className={classes.paper}>Item 2</Paper>
</Grid>
<Grid item xs={6} sm={4}>
<Paper className={classes.paper}>Item 3</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>Item 3</Paper>
</Grid>
</Grid>
</div>
However, it would be challenging to control the spacing in the “wrapped row” in MUI.
Play around with the breakpoints above and adjust the size of your window to see different grid responsive examples.
Diving into the docs, Bootstrap offers more robust features than MUI Grid. For example, .order- classes order your components regardless of their order in the HTML. Bootstrap also has its own suite of components, most of which overlap the Material-UI component library.
After exploring, I feel as though MUI is focused on being a component library conceived around the Material Design guidelines. It has a grid layout system simply because it needs one. Bootstrap feels like the opposite: primarily a layout system that happens to have a suite of components packaged with it.
In summary, Material-UI Grid will feel familiar to you if you have used Bootstrap, and it will likely handle any layout you require. However, if total layout power is your primary concern, then Bootstrap may fit the bill better (and it’s a smaller package size at the time of writing this article).
Material-UI vs CSS Grid for a complex layout
CSS Grid Layout gained support on all major browsers in 2017 and gave web developers a powerful 2-dimensional layout system without needing additional libraries.
Some strong points of CSS Grid:
- no media queries needed
- spacing is easy and borders easily styled
- it is both easier to precisely position a cell, and then the contents of the cell, no div soup required
- One of the biggest benefits is that a cell can be “skipped” like this image from the Mozilla docs on CSS Grid (I’ll demo this below).
Spoiler alert: CSS Grid is extremely powerful, and comparing MUI Grid to it is almost an apples-to-oranges comparison. However, people still need to decide which option suits their situation, so let’s build a more advanced UI and explore some differences.
The top is Material-UI Grid, the bottom is CSS Grid. The output is identical, but behind the scenes is a different story.
Chrome dev tools shows us this handy layout visual when we inspect our CSS Grid.
To accomplish a grid like this, MUI Grid clocks in at 26+ lines of code (depending on formatting).
<Paper className={classes.paper}>
<Grid container>
<Grid xs={12} align="center">
<Typography>Title</Typography>
</Grid>
<Grid container align="left">
<Grid item xs>
<Typography>Top L.</Typography>
</Grid>
<Grid container direction="column" item xs={6}>
<Grid item align="center">
<Typography>Center Top</Typography>
</Grid>
<Grid item align="center">
<Typography>Center Middle</Typography>
</Grid>
<Grid item align="center">
<Typography>Center Bottom</Typography>
</Grid>
</Grid>
<Grid item xs align="right" style={{
display: "flex",
flexDirection: "column",
justifyContent: "flex-end"
}}
>
<Typography>Bottom R.</Typography>
</Grid>
</Grid>
</Grid>
</Paper>
Lots of nesting, lots of thinking, lots of playing with flex to get that “Last Bottom R.” in place. Take a look in particular at the code needed to get Material-UI Grid items aligned right, left, top, and bottom. (For a great resource on aligning items in Material-UI’s Grid, read here)
Here’s the CSS Grid version. I still use MUI’s Typography component. This can be reduced to about 12 lines of JSX plus several lines of styling, although for formatting it is longer here.
<Paper
className={`${classes.paper} ${classes.gridWrapper}`}
style={{ marginTop: 12 }}
>
<Typography
style={{ gridArea: "title", textAlign: "center", marginBottom: 12 }}
>
Title
</Typography>
<Typography style={{ gridArea: "a1" }}>
First Top L.
</Typography>
<Typography style={{ gridArea: "a2", textAlign: "center" }}>
Center Top
</Typography>
<Typography style={{ gridArea: "b2", textAlign: "center" }}>
Center Middle
</Typography>
<Typography style={{ gridArea: "c2", textAlign: "center" }}>
Center Bottom
</Typography>
<Typography style={{ gridArea: "c3", textAlign: "right" }}>
Last Bottom R.
</Typography>
</Paper>//styles
gridWrapper: {
display: "grid",
gridTemplateAreas: `
"title title title"
"a1 a2 a3"
"b1 b2 b3"
"c1 c2 c3"
`,
gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
}
Take a look at the bottom of that code snippet…the gridTemplateAreas in the gridWrapper class is the key to creating your layout. It is working code but it also provides a visual for the grid layout.
Also, notice how you can omit cells that are not needed, i.e. there is no cell for gridArea: “a3”. This is a pretty sweet feature.
Add border to Material-UI Grid and CSS Grid
I will just give a quick highlight of the code for how to create borders for an MUI Grid and a CSS Grid. If you want full code, see this CodeSandbox.
To add a border around every cell and make MUI Grid look like, well, a grid, I added back any “missing” cells and I added the following CSS:
outerColumn: {
borderRight: "1px solid grey",
borderBottom: "1px solid grey",
borderLeft: "1px solid grey"
},
centerColumn: {
borderBottom: "1px solid grey"
}
The left and right columns of three cells each got the outerColumn class, while the inner column of three cells got the centerColumn class. Pretty straightforward.
The CSS Grid was more elegant, really. I added in any missing cells, but then instead of a new CSS class, I simply updated the gridWrapper class:
gridWrapper: {
border: "1px solid grey",
display: "grid",
backgroundColor: "grey",
gridRowGap: 1,
gridColumnGap: 1,
gridTemplateAreas: `
"title title title"
"a1 a2 a3"
"b1 b2 b3"
"c1 c2 c3"
`,
gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
"& > *": {
backgroundColor: "white"
}
}
Instead of creating external borders, I created a grey background in the grid container, gave the individual cells a white background, and then added a 1px row and column gap to let the grey background show through. Sweet!
When to use Material-UI Grid (and when to use a different layout option)
I think a fair conclusion from these comparisons is that Material-UI grid is best for a situation where you need simple layouts, you want to stay within the Material-UI world, or you want the grid to inherit the MUI theme provided in your app.
I believe in most situations, you can get the job done with MUI Grid, but you could likely do it with cleaner or more intuitive code if you use CSS Grid or Bootstrap.
Material-UI Grid vs DataGrid
The Grid component is focused on component layout in a UI. The Material-UI DataGrid component has a very a different purpose of displaying large datasets. The similarity of the names can be confusing. To learn more about the MUI DataGrid, see the following post:
The Ultimate Guide to Customizing the DataGrid
Resources:
Here are some related posts I’ve written:
- Read this for help with Setting Material-UI Grid item height
- What is the Flex-Grow CSS Property (5 Examples with Code!)
- How to Create a MUI Grid Container with Full Width and Height
- Check your JavaScript knowledge with these 50 difficult questions!
