layout - MUI Match Height of Items 10 and 11 with Left Grid - Stack Overflow

admin管理员组

文章数量:1287489

How can I make the height of grid items 10 and 11 match the height of the grid on the left in MUI Grid?

What I've Tried:

1. Used alignItems: "stretch"

   • I set alignItems: "stretch" on the Grid, but items 10 and 11 still didn't match the height of the left grid.

2. Applied minHeight: '100%'

   • I added minHeight: '100%' to the Grid containing items 10 and 11, but it didn't make a difference.

3. Tried height: "100%"

   • I set height: "100%" on individual Grid items, but it didn't achieve the desired result.

4. Used flex: 1

   • I applied flex: 1 to both Grid and Item, but the height still didn't align properly.

5. Set display: "flex" and flexDirection: "column"

   • I tried making the parent Grid display: "flex" with flexDirection: "column", but the height mismatch persisted.

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid2';

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

export default function App() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid
        container
        direction="row"
        spacing={2}
        sx={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >

        <Grid
          container
          direction="row"
          sx={{
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Grid size={12}><Item>num=1</Item></Grid>
          <Grid size={12}><Item>num=2</Item></Grid>
          <Grid size={12}><Item>num=3</Item></Grid>
        </Grid>

        <Grid
          container
          direction="row"
          sx={{
            justifyContent: "center",
            alignItems: "center",
            minHeight:'100%'
          }}
        >
          <Grid size={6}><Item>num=4</Item></Grid>
          <Grid size={6}><Item>num=5</Item></Grid>
          <Grid size={12}><Item>num=6</Item></Grid>
          <Grid size={4}><Item>num=7</Item></Grid>
          <Grid size={4}><Item>num=8</Item></Grid>
          <Grid size={4}><Item>num=9</Item></Grid>
        </Grid>

        <Grid
          container
          direction="column"
          sx={{
            justifyContent: "flex-end",
            alignItems: "stretch",
          }}
        >
          <Grid size={12}><Item>num=10</Item></Grid>
          <Grid size={12}><Item>num=11</Item></Grid>
        </Grid>
      </Grid>
    </Box>
  );
}

本文标签： layoutMUI Match Height of Items 10 and 11 with Left GridStack Overflow