After taking a glance at the screenshot provided below, I am striving to achieve the design labeled as "Lg" utilizing the Grid component from Material UI.
- The box labeled with the number "3" has been fashioned by employing a grid configuration of
9by3 - On the other hand, the box bearing the number "9" has been structured using a grid layout of
9by9
Query:
How do I determine the width of Lg using the Grid system? Essentially, the dimensions of Sm and Lg are calculated as follows:
- Sm: 100% / 12 * 9 / 12 * 3
- Lg: 100% - 100% / 12 * 9 / 12 * 3
Sample code:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import { Grid, Box } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: "bisque",
padding: theme.spacing(1),
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
container: {
display: "flex",
},
boxSm: {
marginTop: theme.spacing(1),
width: "calc(100% / 12 * 9 / 12 * 3)",
},
boxLg: {
marginTop: theme.spacing(1),
width: "calc(100% - 100% / 12 * 9 / 12 * 3)",
},
box: {
marginTop: theme.spacing(1),
},
}));
export default function AutoGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container>
<Grid container xs={9} spacing={0}>
<Grid item xs={3}>
<Paper className={classes.paper}>3</Paper>
</Grid>
<Grid item xs={9}>
<Paper className={classes.paper}>9</Paper>
</Grid>
</Grid>
</Grid>
<Box className={classes.container}>
<Box className={classes.boxSm}>
<Paper className={classes.paper}>Sm</Paper>
</Box>
<Box className={classes.boxLg}>
<Paper className={classes.paper}>Lg</Paper>
</Box>
</Box>
<Box className={classes.box}>
<Paper className={classes.paper}>Full width</Paper>
</Box>
</div>
);
}