I am trying to use MUI Card in Grid layout
<Grid container spacing={5} alignContent="center" alignItems="center" justifyContent="center" columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={4} md={6} alignItems="center">
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
<Grid item xs={4} md={6}>
<Card />
</Grid>
</Grid>
But the problem is its not center aligns with in each grid item. I have added border for each item
What I did wrong?
Also as you can see the grid overlap on the title above
Related
I am rendering four different graphs. I had them appearing to be in the same height and width, but I had changed one of the grids to include 2 graphs instead of 1. I had the grid expand in height for it to fit in the graph. But now the other graphs have this big empty space at the bottom of the grid. How would I be able to expand my graph so it could take care of all the grid.
What I tried is using a style{{height: '100%'}}, but I guess that only takes care of the grid, not the graph.
<Grid container spacing={2}>
<Grid item xs={4}>
<Graph1/>
</Grid>
<Grid item xs={4} style={{height: '100%'}}>
<Graph2/>
</Grid>
<Grid item xs={4}>
<Graph3/>
</Grid>
<Grid item xs={4}>
<Graph4/>
</Grid>
</Grid>
what I have in my Graph2-4 is the following
<Grid container spacing={2}>
<Grid item xs={12}>
<MyGraph/>
</Grid>
<Grid item xs={12}/>
</Grid>
Not to sure how to expand the content to take care of all the grid
You were half-way there I think. The parent grid should be 100vh and each graph's parent grid 100%
<Grid container spacing={2} style={{ height: '100vh' }}>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph1 />
</Grid>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph2 />
</Grid>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph3 />
</Grid>
<Grid item xs={4} style={{ height: '100%' }}>
<Graph4 />
</Grid>
</Grid>
Also for Graph2-4, I believe the 2nd <Grid item xs={12}/> can be removed, unless you saw a purpose.
<Grid container spacing={2}>
<Grid item xs={12} style={{ height: '100%' }}>
<MyGraph />
</Grid>
</Grid>
I have a Grid container and two "sub-containers" each taking half the space of the parent grid. I want to stack items of different heights on each of the sub-containers, but I'm having a problem with one side's height affecting the other.
The code is extremely simple:
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item container xs={6}>
<Grid item xs={12}>
<Item>Short items</Item>
</Grid>
<Grid item xs={12}>
<Item>Short items</Item>
</Grid>
<Grid item xs={12}>
<Item>Short items</Item>
</Grid>
</Grid>
<Grid item container xs={6}>
<Grid item xs={6}>
<Item style={{ height: "450px" }}>Tall item</Item>
</Grid>
</Grid>
</Grid>
</Box>
And also a Codesandbox forked from the documentation's. The result I want is the items on the left stacking right on top of each other.
You can add alignContent="baseline" to your left Grid container like:
<Grid item container xs={6} alignContent="baseline">
You can take a look at this sandbox for a live working example of this usage.
I'm attempting to have a grid looking like this for larger displays:
and this for smaller sizes:
Currently the skeleton of my grid is succinctly like this:
<Fragment>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<img src={img1} />
</Grid>
<Grid item xs={12} md={6}>
<Paper>Text Content 1...</Paper>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Paper>Text Content 2...</Paper>
</Grid>
<Grid item xs={12} md={6}>
<img src={img2} />
</Grid>
</Grid>
</Fragment>
How can I do such as in mobile view (width 12) the first Grid item from the second Grid container (Text content 2) displays after (below) the image?
Use like this:
<Grid container>
<Grid spacing={3} container item xs={12} md={12}>
<Grid item xs={12} md={6} className={classes.item}>
<img
width="50px"
src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
alt="abc"
/>
</Grid>
<Grid container item xs={12} md={6} className={classes.item}>
<Paper>Text Content 1...</Paper>
</Grid>
</Grid>
<Grid container item spacing={3} xs={12} md={12} className="flexgrid">
<Grid container item xs={12} md={6} className={classes.item}>
<Paper>Text Content 2...</Paper>
</Grid>
<Grid container item xs={12} md={6} className={classes.item}>
<img
width="50px"
src="https://cdn3.vectorstock.com/i/1000x1000/37/37/simple-cartoon-a-cute-bear-vector-18823737.jpg"
alt="abd"
/>
</Grid>
</Grid>
</Grid>
SOURCE
PREVIEW
for re-order added:
<Grid container item spacing={3} xs={12} md={12} className="flexgrid">
and css :
#media screen and (max-width: 720px) {
.flexgrid{
flex-direction: column-reverse
}
}
How do I stack a CircularProgress component on top of a Typography component (both of which are in a Backdrop component)?
Currently, the progress component is on the left and the text is right next to the progress bar. I've attempted to use grid items/containers but no luck so far.
<Backdrop open={loading} style={{zIndex: 20, opacity: 0.8, backgroundColor: '#FFFF', color: '#0000'}}>
<Grid container alignItems='center' justify='center' alignContent='center'>
<Grid item sm={12} md={12} lg={12} align='center'>
<PurpleProgress/>
</Grid>
<Grid item sm={12} md={12} lg={12} align='center'>
<Typography variant="body2" style={{color: '#000000'}}><b>{message}</b></Typography>
</Grid>
</Grid>
</Backdrop>
You are probably having this issue on small screens because you do not have the xs prop set to take up the entire grid. To solve this issue, if you want the stacking to be consistent across all screen sizes, you can just use xs={12}
<Grid container alignItems='center' justify='center' alignContent='center'>
<Grid item xs={12} align='center'>
<PurpleProgress/>
</Grid>
<Grid item xs={12} align='center'>
<Typography variant="body2" style={{color: '#000000'}}><b>{message}</b></Typography>
</Grid>
</Grid>
I'm trying to generate a grid that is three deep. Example below:
I want the black box to stretch the length of the screen, and the three boxes to be aligned on the same row. I have put the three boxes in another grid that will go to a max-width of 1200px. this is so it looks neat on large screens. I want the three boxes to stack on mobile.
below is my code
const Landing = (props) => {
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
blackBox:{
color:'white',
backgroundColor:'black',
width:'100%',
},
white:{
color:'white',
}
}));
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Container>
</Grid>
</div>
);
}
export default Landing;
The issue is when I add the element that only allow the three boxed to go max 1200 they all stack. When I remove it they don't stack but stretch the full with of the screen.
can anyone point me in the right direction?
You should put the Container outside the Grid
<Grid container className={classes.blackBox}>
<Container maxWidth="sm">
<Grid container>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text </Typography>
</Grid>
<Grid cols={1} item xs={12} sm={4} className={classes.white}>
<Typography>Text</Typography>
</Grid>
</Grid>
</Container>
</Grid>