Как организовать материал-сетку в ряды?

Question

Я использую material-ui для создания формы, используя систему Grid. Я хотел бы сделать следующее:

<Grid container>
    <Grid item xs={4} />
    <Grid item xs={4} />
    <Grid item xs={4} />
</Grid>

И иметь возможность поместить первые 2 элемента на первыйстрока и третья во второй строке, единственный способ, который я нашел, это сделать:

<Grid container>
    <Grid item xs={4} />
    <Grid item xs={4} />
</Grid>
    <Grid container>
    <Grid item xs={4} />
</Grid>

Что является лучшим способом для укладки Grid material-ui в строки (как концепция класса строк в сетке Bootstrap))?

Я тоже думал об этих параметрах:

- заполнение первой строки пустым элементом сетки?

- вывод вертикального контейнера?

Answer 1

Вы близки ко второму блоку кода.

Я обнаружил, что вы можете просто создать 2 различных раздела сетки, такие как:

<div>
  <Grid id="top-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 1</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 1</Paper>
    </Grid>
  </Grid>
  <Grid id="bottom-row" container spacing={24}>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 2</Paper>
    </Grid>
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 2, 2</Paper>
    </Grid>
  </Grid>
</div>

Вы можете поиграть с ним в моем песочница

Также может быть полезно проверить официальную документацию для Grid, поскольку в ней показано несколько способов ее использования, а также ссылки на каждый пример, размещенный в codeandbox.поэтому вы можете поиграть с ним самостоятельно.

Из документов кажется, что лучший способ иметь многослойные сеточные системы - это определить ширину всей сетки, а затем определить ширину каждой ячейки,так как это подтолкнет ячейки позже в ряду к другим строкам.