Layout and organization

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

Using containers

Often, when you're trying to lay components out 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 look at an example to see what's possible:

import "typeface-roboto";
import React, { Fragment } from "react";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
 
export default function App() {
  const textStyle = {
    backgroundColor: "#cfe8fc",
    margin: 5,
    ...