How to align items across nested Grid (React Material UI)

user_11650363 0
Viewed 1169

I am now using React material UI Grid component to construct my web page, but I am facing a problem regarding align items across nested grid. Right now the view is like this: enter image description here

but I want the item on the right half side to be stretched to align with the left half side at the bottom, ideally, it should be this: enter image description here

the code is like this:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({

  paper: {
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function NestedGrid() {
  const classes = useStyles();

  function FormRow3() {
    return (
      <React.Fragment>
        <Grid item xs={4}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
      </React.Fragment>
    );
  }
  function FormRow2() {
    return (
      <React.Fragment>
        <Grid item xs={12}>
          <Paper className={classes.paper}>item</Paper>
        </Grid>
      </React.Fragment>
    );
  }

  return (
    <div >
      <Grid container spacing={1}>
        <Grid container item xs={6} spacing={3}>
          <FormRow3 />
          <FormRow3 />
        </Grid>
        <Grid container item xs={6} spacing={3}>
          <FormRow2 />
        </Grid>
      </Grid>
    </div>
  );
}

and also I have a sandbox here: https://codesandbox.io/s/material-demo-forked-xunx7

can anyone help?

Edit: Using @nipuna777 answer(flex=1), I can align the items in the grid. But I found if more complex scenario, like this: enter image description here

top, bottom and right part may not align perfectly. so how to make all these boundary align perfectly ??

code for above is here: https://codesandbox.io/s/material-demo-forked-imrrh?file=/demo.js

material-ui reactjs grid css
3 Answers

One possible solution would require the following changes:

  1. Add container={true} to the Grid element so that it will create a flex container for the child components. (In this case, the child components would be Paper.
<Grid item xs={12} container={true}>
  <Paper className={classes.paper}>item</Paper>
</Grid>
  1. In the classes.paper definition, add flex: 1 to ensure that the Paper element will take up the full space in the container.
paper: {
  flex: 1,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary
}

You can see a working example here: https://codesandbox.io/s/material-demo-forked-ud6um?file=/demo.js

user_31566440

Have you tried reducing the spacing of the middle Grid to 2,

return (
    <div>
      <Grid container spacing={1}>
        <Grid container item xs={6} spacing={3}>
          <FormRow1 />
          <FormRow3 />
        </Grid>
        <Grid container item xs={6} spacing={2}>
          <FormRow2 />
        </Grid>
        <Grid item xs={12} spacing={3}>
          <FormRow4 />
        </Grid>
      </Grid>
    </div>
  );

Couldn't post this much code in comments, so posting as an answer.

user_72562280

If you look through your inspector you can see that the problem is you have a padding on instead of the height set.

<div class="MuiPaper-root makeStyles-paper-1 MuiPaper-elevation1 MuiPaper-rounded">
 item
</div>

You should replace padding: 8px; by height: 100%;

So you could use classes in the element above to apply your new style.

user_79422420
Related