Material Designのレスポンシブレイアウトグリッドは、画面サイズと向きに適応し、レイアウト間の一貫性を保証します。
[grid](https://material.io/design/layout/responsive-layout-grid.html) は、レイアウト間の視覚的な一貫性を実現しながら、さまざまなデザインでの柔軟性を可能にします。 Material DesignのレスポンシブUIは12列のグリッドレイアウトに基づいています。 [grid](https://material.io/design/layout/responsive-layout-grid.html) は、レイアウト間の視覚的な一貫性を実現しながら、さまざまなデザインでの柔軟性を可能にします。 Material DesignのレスポンシブUIは12列のグリッドレイアウトに基づいています。 Material DesignのレスポンシブUIは12列のグリッドレイアウトに基づいています。 [grid](https://material.io/design/layout/responsive-layout-grid.html) は、レイアウト間の視覚的な一貫性を実現しながら、さまざまなデザインでの柔軟性を可能にします。 Material DesignのレスポンシブUIは12列のグリッドレイアウトに基づいています。 Material DesignのレスポンシブUIは12列のグリッドレイアウトに基づいています。 > ⚠️ The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/components/data-grid/). ## 仕組み グリッドシステムは `Grid` コンポーネントで実装されています。 - 高い柔軟性のために [CSSのFlexible Boxモジュール](https://www.w3.org/TR/css-flexbox-1/) を使用します。 - レイアウトには* containers * と * items*の2種類あります 。 - アイテムの幅はパーセンテージで設定されているので、それらは常に親要素に対して流動的でサイズが決まっています。 - アイテムには、個々のアイテム間の間隔を空けるための余白があります。 - xs、sm、md、lg、およびxlの5つのグリッドブレークポイントがあります。 **flexboxに不慣れ**な場合、 [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) を読むことをおすすめします。 ## Spacing レスポンシブグリッドは、列幅ではなく、一貫した間隔幅に焦点を当てています。 材料設計の余白と列は **8px** の四角いベースライングリッドに従います。 Spacingプロパティは、0から10までの整数です。 デフォルトでは、2つの格子項目間の間隔が線形関数に従う： `output(spacing) = spacing * 8px`、例えば `spacing={2}`では16pxに広いギャップを作成します。 この出力変換関数は、[テーマを使う](/customization/spacing/)ことでカスタマイズできます。 {{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}} ## Fluid grids Fluid gridsでは、コンテンツの尺度とサイズを変更する列を使用します。 流体グリッドのレイアウトでは、ブレークポイントを使用して、レイアウトを大幅に変更する必要があるかどうかを判断できます。 ### Basic grid 列幅はすべてのブレークポイント（つまり `xs` ）に適用されます。 {{"demo": "pages/components/grid/CenteredGrid.js", "bg": true}} ### ブレークポイント付きGrid 一部の列では複数の幅が定義されているため、定義されたブレークポイントでレイアウトが変更されます。 {{"demo": "pages/components/grid/FullWidthGrid.js", "bg": true}} ## インタラクティブ 以下は、さまざまな設定の視覚的な結果を調べることができるインタラクティブなデモです。 {{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}} ## 自動レイアウト 自動レイアウトにより、 *items* が使用可能なスペースを均等に共有します。 自動レイアウトにより、 *items* が使用可能なスペースを均等に共有します。 自動レイアウトにより、 *items* が使用可能なスペースを均等に共有します。 それはまた、あなたが1つの *item* 幅を設定することができ、他のものはそれの周りに自動的にサイズ変更されることを意味します。 {{"demo": "pages/components/grid/AutoGrid.js", "bg": true}} ## 複雑なグリッド 以下のデモは、Material Designには従っていませんが、グリッドを使用して複雑なレイアウトを構築する方法を示しています。 {{"demo": "pages/components/grid/ComplexGrid.js", "bg": true}} ## Nested Grid `container`プロパティと`item`プロパティは、それぞれ独立したブール値です。 それらは組み合わせることができます。 > Flex ** container ** は、 `flex` または `inline-flex`を持つ要素によって生成されたボックスです。 フレックスコンテナのインフローの子は、flex ** items ** と呼ばれ、flexレイアウトモデルを使用してレイアウトされます。 Flex ** container ** は、 `flex` または `inline-flex`を持つ要素によって生成されたボックスです。 フレックスコンテナのインフローの子は、flex ** items ** と呼ばれ、flexレイアウトモデルを使用してレイアウトされます。 Flex ** container ** は、 `flex` または `inline-flex`を持つ要素によって生成されたボックスです。 フレックスコンテナのインフローの子は、flex ** items ** と呼ばれ、flexレイアウトモデルを使用してレイアウトされます。 Flex ** container ** は、 `flex` または `inline-flex`を持つ要素によって生成されたボックスです。 フレックスコンテナのインフローの子は、flex ** items ** と呼ばれ、flexレイアウトモデルを使用してレイアウトされます。 https://www.w3.org/TR/css-flexbox-1/#box-model {{"demo": "pages/components/grid/NestedGrid.js", "bg": true}} ## 制限事項 ### Negative margin 項目間の間隔を実装するために使用する負のマージンには1つ制限があります。 項目間の間隔を実装するために使用する負のマージンには1つ制限があります。 負のマージンが ``を超えると水平スクロールが表示されます。 回避策は3つあります。 回避策は3つあります。 1. スペーシング機能を使用し、ユーザ空間でそれを実装していない `spacing ={0}` （デフォルト）。 2. 子に適用された間隔値の少なくとも半分を使用して、親にパディングを適用します。 ```jsx