mui grid row spacing code example
Example 1: 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 2: 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