Выравнивание размера сетки справа с суммированной высотой динамической сетки слева

Question

Я работаю через этот код:

demo.js

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 => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  paper2: {
    height: "100%",
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

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

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6} >
          <Paper className={classes.paper2}>xs=12 sm=6</Paper>
        </Grid>        
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';

ReactDOM.render(<Demo />, document.querySelector('#root'));

Но я получаю следующее форматирование для макета блока:

(1) Есть ли способ сделать так, чтобы правая сетка не перекрывалась с прямоугольниками в нижнем ряду?

(2) Мне нужно, чтобы поле справа было такой же высоты, как и общее количество сеток слева, которое является динамическим по числу.

Answer 1

Добавить box-sizing: border-box к .paper2:

paper2: {
  height: "100%",
  padding: theme.spacing(2),
  textAlign: 'center',
  color: theme.palette.text.secondary,
  boxSizing: 'border-box'
}

Демонстрация:

Answer 2

.makeStyles-paper2-3 { имеет отступ 16px вместе с height:100%, что вызывает переполнение правого div.Удалите padding, и он не будет переполнен.

Однако, если вы хотите добавить заполнение для вашего контента внутри, вы можете сделать это с помощью дочернего элемента div

Попробуйте это:

<Grid item xs={12} sm={6} >
    <Paper className={classes.paper2} style={{padding: '0'}} > {/*Removed padding from here*/}
        <div style={{padding: '16px'}}>xs=12 sm=6</div> {/* Added padding  here */}
    </Paper>
</Grid>

Надеюсь, это поможет.Ура !!