Как добавить новую строку для элемента сетки в пользовательский интерфейс материала?

Question

Я собираюсь разорвать строку такого элемента сетки. введите описание изображения здесь Как вы можете видеть на изображении, оставшееся пространство сетки должно быть пустым.

<Grid container spacing={3}
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
  <Grid item xs={4}>
    "Grid Item xs={4}"
  </Grid>
  // empty space
  <Grid item xs={12}>
    "Grid Item xs={12}"
  </Grid>
</Grid>

Следует ли использовать внутренний grid container? Или мне следует использовать display flex?

Answer 1

Вы можете просто добавить пустую сетку xs из 8. вот так:

<Grid container spacing={3}
  <Grid item xs={12}>
   "Grid Item xs={12}"
  </Grid>
 <Grid item xs={4}>
  "Grid Item xs={4}"
 </Grid>
 <Grid item xs={8}>
  // empty 
 </Grid>
 <Grid item xs={12}>
  "Grid Item xs={12}"
 </Grid>