Я пытаюсь сгенерировать сетку глубиной три. Пример ниже:
Я хочу, чтобы черный прямоугольник растягивал длину экрана, и чтобы три прямоугольника были выровнены в одной строке. Я поместил три коробки в другую сетку, которая будет иметь максимальную ширину 1200 пикселей. это так выглядит аккуратно на больших экранах. Я хочу, чтобы три ящика складывались на мобильный телефон.
ниже - мой код
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;
Проблема заключается в том, что я добавляю элемент, который позволяет только трем в штучной упаковке пройти максимум 1200, все они складываются. Когда я снимаю его, они не складываются, а растягиваются по всей ширине экрана.
Может кто-нибудь направить меня в правильном направлении?