MUI 行网格与列网格

Question

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
  return (
    <Box sx={{ width:'80vw',height:'80vh',background:'lightblue' }}>
      <Grid container spacing={2} direction='row'>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
      </Grid>
    </Box>
  );
}

在MUI中，当

direction='row'

时，我们有以下输出

当

direction='column'

如果我们像

flexbox

中的

css

那样思考，我们期望以下

我的问题是，

xs={number}

在

column

模式下的用途是什么？我怎样才能得到预期的输出

Grid

？

Answer 1

如果将

direction="column"

赋予

container

网格，并将

xs={number}

赋予网格

item

，则列的最大大小为

xs

道具的大小。

<Box>
  <Grid
    container
    direction="column"
    justifyContent="center"
    alignItems="center"
  >
    <Grid item xs={12}>
      <Item>xs=12</Item>
    </Grid>
    <Grid xs={10}>
      <Item>xs=10</Item>
    </Grid>
    <Grid xs={2}>
      <Item>xs=2</Item>
    </Grid>
  </Grid>
</Box>