web-dev-qa-db-fra.com

Comment organiser Material-ui Grid en lignes?

J'utilise material-ui pour faire un formulaire, en utilisant le système Grid, j'aimerais faire ce qui suit:

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

Et pouvoir mettre les 2 premiers éléments, sur la première rangée et le troisième sur une deuxième rangée, la seule façon que j'ai trouvée de le faire est:

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

Quelle est la meilleure façon d'empiler material-uiGrid dans des lignes (comme le concept de classe de ligne dans Bootstrap grid)?

J'ai également pensé à ces options:

  • remplir la première ligne avec un élément Grid vide?

  • mettre un conteneur vertical?

javascriptreactjsmaterial-designmaterial-ui
13
Gregory Arouche

Vous pouvez faire quelque chose comme ça

<Grid container spacing={1}>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
    <Grid container item xs={12} spacing={3}>
      <Grid item xs={4}>
        <Paper className={classes.paper}>item</Paper>
      </Grid>
    </Grid>
</Grid>
0
Smruti Ranjan Rana

Voici une autre approche que vous pourriez adopter qui ne nécessite pas deux conteneurs de grille. Dans Material UI, vous pouvez organiser une grille en lignes en utilisant le fait qu'une ligne a 12 colonnes et en utilisant des éléments de grille vides (comme Material UI ne prend pas en charge les éléments de grille décalés ) par ex.

<Grid 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 item xs={4} />
    {/* 12 Columns used, so next grid items will be the next row  */}
    {/* This works because Material UI uses Flex Box and flex-wrap by default */}
    <Grid item xs={4}>
      <Paper className={classes.paper}>Grid cell 1, 2</Paper>
    </Grid>
    <Grid item xs={8} />
  </Grid>

Vous pouvez voir cela fonctionner ici .

En effet, cela est en fait démontré sur les sites Web Material UI (mais sans les compensations) ici .

J'admets cependant que je préférerais voir les éléments sémantiques Row et Column dans Material UI (par exemple, comme dans Bootstrap), mais ce n'est pas ainsi que cela fonctionne.

0
Ben Smith