Material-UI has a Grid component that we can use to compose complex layouts that are responsive. At a high level, a Grid component can be either a container or an item within a container. By combining these two roles, we can achieve any type of layout for our app. To get familiar with Material-UI grid layouts, let's put together an example that uses a fairly common layout pattern that we'll find in many web applications. Here is what the end result looks like:
As you can see, this layout has the familiar sections that are typical in many web apps. This is just an example layout; you can use the Grid component to build any type of layout you can imagine. Let's take a look at the code that created this layout:
import "typeface-roboto";
import React from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography...
