Как сделать сетку React Material отзывчивой?

Question

Я пытаюсь сделать эту решетку отзывчивой, но она не работает! :

 return (
    <div className={classes.root}>
      <Grid
        container
        spacing={1}
      >
        <Grid
          item
          sm={3}
        >
          <Paper className={classes.paper}>item</Paper>
        </Grid>
        <Grid
          item
          sm={9}
        >
          <Paper className={classes.paper}>
            (...)
          </Paper>
        </Grid>
      </Grid>
    </div>
  );

Здесь вы можете увидеть результаты:

Answer 1

Сетка материала работает как строка из 12 блоков, каждый блок имеет ширину полной ширины, деленную на 12. и несколько макетов. xs (очень маленький), sm (маленький), md (средний) и lg (большой)

, когда вы определяете xs = {3} и xs = {9}, означает, что когда ваш макет очень мал для например: ширина 120 пикселей,

* первый компонент с xs = {3} будет занимать 3/12 * 120px = 30px *

* второй компонент с xs = {9}, 9 / 12 * 120px = 90px *

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

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

xs = {12} означает, что если ваш макет слишком мал, он сделает вас компонентом сетки, чтобы заполнить все пространство (полная ширина в этом случае)

, вы можете попробовать использовать другое значение, например xs = {6}, которое заполнит до половины контейнера.