我正在尝试生成一个三层深的网格。下面的示例：

我希望黑框延长屏幕的长度，并使三个框在同一行上对齐。我将三个盒子放在另一个网格中，最大宽度为1200px。这样在大屏幕上看起来很整洁。我希望将这三个盒子堆放在手机上。

下面是我的代码

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的元素时，它们全部堆叠在一起。当我移除它时，它们不会堆叠，而是将整个屏幕拉长。

有人能指出我正确的方向吗？