Layout and organization

Material-UI provides us with a number of components that help us to control the overall layout of our applications and to organize the other UI components without each layout. This section will demonstrate that you have to use containers and grids.

Using containers

Often, when you're trying to lay out components on your page, the horizontal layout is the most difficult part to get right. The Container component from Material-UI is a simple, but powerful, layout tool. It helps to control the horizontal width of its children. Let's take a look at an example to see what's possible:

import "typeface-roboto";
import React, { Fragment } from "react";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";

export default function App() {
  const textStyle = {
    backgroundColor: "#cfe8fc",
    margin: 5,
    textAlign: "center"
  };

  return (
    <Fragment...