Css 延伸到视图末端的嵌套格线

如下面的屏幕截图所示，我正试图通过使用Grid（from）实现“Lg”

• 编号为“3”的框是使用

  9

  和

  3

• 编号为“9”的框是使用

  9

  和

  9

问题：
如何使用网格系统获得

Lg

的宽度？基本上，

Sm

和

Lg

使用以下公式计算：

• Sm:100%/12*9/12*3
• Lg:100%-100%/12*9/12*3

示例代码：

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>
  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core”导入{Grid，Box}”；
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：“bisque”，
填充：主题。间距（1），
},
论文：{
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
},
容器：{
显示：“flex”，
},
boxSm：{
marginTop：主题。间距（1），
宽度：“计算（100%/12*9/12*3）”，
},
boxLg：{
marginTop：主题。间距（1），
宽度：“计算（100%-100%/12*9/12*3）”，
},
方框：{
marginTop：主题。间距（1），
},
}));
导出默认函数autoglid（）{
const classes=useStyles（）；
返回(
3.
9
钐
Lg
全宽
);
}

---

如果您定义xs和lg屏幕，当您从小屏幕切换到大屏幕时，它将自动工作

<Grid container xs={9} lg={12} spacing={0}>
      <Grid item lg={6} xs={3}>
        <Paper className={classes.paper}>3</Paper>
      </Grid>
      <Grid item lg={6} xs={9}>
        <Paper className={classes.paper}>9</Paper>
      </Grid>
    </Grid>

3.
9

因此，在这里，您可以定义在特定屏幕上的大小，一旦切换到大屏幕，它将延伸到视图的末尾。完整代码

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 App() {
const classes = useStyles();

return (
 <div className={classes.root}>
  <Grid container>
    <Grid container xs={9} lg={12} spacing={0}>
      <Grid item lg={6} xs={3}>
        <Paper className={classes.paper}>3</Paper>
      </Grid>
      <Grid item lg={6} 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>
);
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core”导入{Grid，Box}”；
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：“bisque”，
填充：主题。间距（1），
},
论文：{
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
},
容器：{
显示：“flex”，
},
boxSm：{
marginTop：主题。间距（1），
宽度：“计算（100%/12*9/12*3）”，
},
boxLg：{
marginTop：主题。间距（1），
宽度：“计算（100%-100%/12*9/12*3）”，
},
方框：{
marginTop：主题。间距（1），
},
}));
导出默认函数App（）{
const classes=useStyles（）；
返回(
3.
9
钐
Lg
全宽
);
}

对不起，似乎不起作用。带有“9”的框仍然没有延伸到视图的末尾。