Create a grid of cards with MUI

What is Material UI?

Material UI is a library of React components that implements Google’s Material Design. Material Design is an open source design system developed by Google in 2014 to help development teams build high-quality digital experiences for Android, iOS, Flutter, and the web.

Creating a Grid

We are going to recreate the following grid of cards using Material UI. I created this on a clean react app using create-react-app. If you are unfamiliar with create-react-app, you can read up on it here.

Grid of cards using MUI

The first thing you will need to do is install Material UI. If you use npm, type the following in your react project directory:

npm install @mui/material @emotion/react @emotion/styled

If you use yarn, type the following in your react project directory:

yarn add @mui/material @emotion/react @emotion/styled

Preparing your project for MUI

A good practice before you start to design your interface is to clean up the default css settings in your react project. First clean out the index.css file and add the following:

# index.css file

* {
  margin: 0;
  padding: 0;
}

This will zero out your margins and padding so you can control everything with Material UI.

Next, I like to remove all unnecessary code from your App.js file in your projects src directory. Specifically deleting the App.css file and the references to it in your App.js file. It should look something like the following:

// App.js file

import React from "react";

function App() {
  return (
    <>
      <h1> Sample Text </h1>
    </>
  );
}

export default App;

Create a new file and name it CardSample.js. I like to put all my components in a new directory inside the src directory of my projects and name it “components”.

In CardSample.js, type in the basic structure for a React component. Your file should look something like the following.

// CardSample.js file

function CardSample() {

  return (
    <>
      <h1>Sample text</h1>
    </>
  )
}

export default CardSample;

Create the layout

Now, let’s add a basic structure to our interface in App.js. Your file should look like the following:

// App.js file

import React from "react";
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import CardSample from "./components/CardSample";

function App() {
  return (
    <>
      <CssBaseline />
      <Container>
        <Box sx={{ m: 2 }}>
          <CardSample />
        </Box>
      </Container>
    </>
  );
}

export default App;

The CssBaseline component is used to start with a simple and consistent baseline to build your app.

The Container component centers all your content horizontally.

The Box component acts like a wrapper component. It creates a new DOM element similar to <div>. Like most MUI components, you can customize it via system properties using the sx prop. In this example, I am giving this Box a margin of 2.

Finally, we add the CardSample component we created earlier.

Create the Grid

Like creating the layout before, I will show you the completed code for the CardSample component, then explain each section. Your file should look like the following:

// CardSample.js file

import React from "react";
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

function CardSample() {

  const Item = styled(Paper)(() => ({
    backgroundColor: '#98d6a9',
    padding: 8,
    textAlign: 'center',
    color: 'black',
  }));

  return (
    <>
      <Grid container spacing={4}>

        <Grid item xs={6}>
          <Item elevation={3}>One</Item>
        </Grid>

        <Grid item xs={6}>
          <Item elevation={3}>Two</Item>
        </Grid>

        <Grid item xs={6}>
          <Item elevation={3}>Three</Item>
        </Grid>

        <Grid item xs={6}>
          <Item elevation={3}>Four</Item>
        </Grid>

        <Grid item xs={6}>
          <Item elevation={3}>Five</Item>
        </Grid>

        <Grid item xs={6}>
          <Item elevation={3}>Six</Item>
        </Grid>

      </Grid>
    </>
  )
}

export default CardSample;

The Styled component imported at the top of the file is for customizing the style of components. Here we see the function named Item that uses the Styled component to customize some settings for the Paper component. So instead of wrapping each item of the Grid with the Paper component and customizing each individual item, we can use the Item function as a wrapper to achieve the same effect making your code more DRY.

I’d like to mention here that MUI has a specific Card component. I prefer to use the Paper component because if looks nicer.

The Grid component allows your layout to adapt to screen size and orientation so that it is consistent throughout your layout.

The way Grid works is by first bookending your <Grid item>‘s with a <Grid container>. For each <Grid item> you can specify how many columns it will use on your page. Grids are made up of 12 columns, so if you specify xs={12} then that Item will take up the whole page. If you specify xs={6} it will take up half the page therefore allowing 2 items on one row. Try changing the sx values and see how it is represented on the page. You can also change or add properties to the Paper component, by editing the values in the Item function.

Lastly, the elevation prop on the <Item> tag allows you to adjust the shadow beneath the paper items.