Material UI — Grids

Material UI is a Material Design library made for React. It’s a set of React components that have Material Design styles. In this article, we’ll look at how to create layouts Material Design.

Auto-layout

We can create auto layouts if we don’t specify a column width for our breakpoints.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs>
          <Paper className={classes.paper}>foo</Paper>
        </Grid>
        <Grid item xs>
          <Paper className={classes.paper}>bar</Paper>
        </Grid>
        <Grid item xs>
          <Paper className={classes.paper}>baz</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

to create our layout.

We have xs without any breakpoints, so we’ll let Material UI determine the sizing of the columns.

Nested Grid

We can create a nested grid with the Grid component.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default function App() {
  const classes = useStyles();

return (
    <div className={classes.root}>
      <Grid container spacing={1}>
        <Grid container item xs={3} spacing={1}>
          <Paper className={classes.paper}>foo</Paper>
        </Grid>
        <Grid container item xs={3} spacing={1}>
          <Paper className={classes.paper}>bar</Paper>
        </Grid>
        <Grid container item xs={3} spacing={1}>
          <Paper className={classes.paper}>baz</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

to create a grid within a grid.

In the nested grid item, we put the Paper as the content.

xs lets us sets the column width.

spacing lets us set the spacing between the columns.

Grid List

Grid lists lets us display a collection of images in an organized grid.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";

const tileData = [
  { img: "http://placekitten.com/200/200", title: "cat" },
  { img: "http://placekitten.com/200/200", title: "cat" }
];

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper
  },
  gridList: {
    width: 500,
    height: 450
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={160} className={classes.gridList} cols={3}>
        {tileData.map(tile => (
          <GridListTile key={tile.img} cols={tile.cols || 1}>
            <img src={tile.img} alt={tile.title} />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

We have the GridList component with some data inside.

We have the GridListTile to show our item.

It has an img element that displays images.

cols has the column width.

alt has the alt text.

Grid List with Title Bars

We can add the GridListTitleBar component to add the title bar to an image tile.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
import GridListTileBar from "@material-ui/core/GridListTileBar";
import IconButton from "@material-ui/core/IconButton";
import InfoIcon from "@material-ui/icons/Info";

const tileData = [
  { img: "[http://placekitten.com/200/200](http://placekitten.com/200/200)", title: "cat", author: "john smith" },
  { img: "[http://placekitten.com/200/200](http://placekitten.com/200/200)", title: "cat", author: "mary smith" }
];

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper
  },
  gridList: {
    width: 500,
    height: 450
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={160} className={classes.gridList} cols={3}>
        {tileData.map(tile => (
          <GridListTile key={tile.img} cols={tile.cols || 1}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              subtitle={<span>by: {tile.author}</span>}
              actionIcon={
                <IconButton
                  aria-label={`info about ${tile.title}`}
                  className={classes.icon}
                >
                  <InfoIcon />
                </IconButton>
              }
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

We have the GridListTileBar component that takes a title prop for the title.

subtitle has the subtitle for the tile.

To include the icons, we’ve installed the @material-ui/icons package to add the icons.

Conclusion

We can create a grid with tiles to display text and images. The image can go with the title and subtitle. The layout can be automatically set.