web-dev-qa-db-ja.com

マテリアルUIグリッドを行に整理する方法は？

私はmaterial-uiを使用してフォームを作成し、Gridシステムを使用して以下を実行します。

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

そして、最初の2つのアイテムを最初の行に配置し、3番目のアイテムを2番目の行に配置できるようにすることができます。

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

material-uiGridを行にスタックするためのより良い方法は何ですか（Bootstrapグリッドの行クラスの概念のように）？

私はこれらのオプションについても考えました：

  • 最初の行を空のGridアイテムで埋めますか？

  • 縦型コンテナ入れ？

javascriptreactjsmaterial-designmaterial-ui
13
Gregory Arouche

あなたはこのようなことをすることができます

<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

2つのグリッドコンテナーを必要としない別のアプローチを次に示します。 Material UIでは、行が12列であるという事実を使用して、空のグリッドアイテムを（Material UIとして オフセットグリッドアイテムをサポートしていない ）使用することにより、グリッドを行に編成できます。

<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>

あなたはこれが動作しているのを見ることができます ここ 。

実際、これは実際にはマテリアルUIのWebサイトで示されています（ただし、オフセットはありません） ここ 。

マテリアルUIでセマンティックな行と列の要素を表示したい（たとえば、Bootstrapのように）ことは認めますが、これは機能しません。

0
Ben Smith