material ui layout grid code example

Example 1: two column grid layout material ui

import Grid from '@material-ui/core/Grid'

      
         ... 
     
     
         ...
     

Example 2: react mui grid

//basic grid layout
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(1), //grid padding
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function NestedGrid() { //export default allows for other modules to 
  //import in the grid function. 
  //create class based upon class outside of export default. 
  const classes = useStyles();

  function FormRow() {
    return ( //return renders the grid
      
        
          item
        
        
          item
        
        
          item
        
      
    );
  } //end of function declaration/creation FormRow()
//usage of formrow element. The declaration above doesn't run. 

  
    
  
  
    
  
  
    
  

Example 3: react grid

npm install react-grid-system --save

// yarn
yarn add react-grid-system 

// example
import { Container, Row, Col } from 'react-grid-system';
 

  
    
      One of three columns
    
    
      One of three columns
    
    
      One of three columns
    
  

Example 4: material ui grid react

npm install @material-ui/core