Intro to Material-UI Grid Component
Material-UI Grid breakpoint examples compared to Bootstrap and CSS grid
--
Material-UI Grid Component is the Material-UI (MUI) grid system option. 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?
In this introduction to the Material-UI Grid I will:
- Compare MUI “Fluid” Grid with bootstrap and build a simple layout with breakpoints.
- Build a complex nested layout using MUI Grid and then build the same layout with CSS Grid.
- Add a border to the complex MUI Grid and CSS Grid
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 fro the Mozilla docs (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.
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.
Are you a developer looking to start your first side hustle? Learn how with my book: Internet Business Success For Software Developers (affiliate link).
If you are a software developer, you have the skills to create an online business. With search engine-optimized content as your marketing engine, your business will be found by software developers worldwide. You can then pursue a profitable business of selling eBooks, courses, consulting, coaching, and more. It is simply a numbers game: the more content you create, the more products and services you will sell.
You Should Read This If You…
- Want to build an online business but don’t know how (I will give you a detailed business model)
- Are worried about having enough ideas for topics or content (I will give you a system for creating an unlimited amount of ideas)
- Want to build an online coding portfolio to boost your career prospects (I will give you the methods to do so quickly, effectively, and with high visibility)
I will show you exactly how I:
- Quickly get my content to rank in Google searches
- Link multiple lines of business and grow revenue exponentially
- Never run out of content to create
- Have a diversified business that is resilient to competition and online trends
- Become a better software developer through growing my business
