Material Designのレスポンシブレイアウトグリッドは、画面サイズと向きに適応し、レイアウト間の一貫性を保証します。
[grid](https://material.io/design/layout/responsive-layout-grid.html) は、レイアウト間の視覚的な一貫性を実現しながら、さまざまなデザインでの柔軟性を可能にします。 Material DesignのレスポンシブUIは12列のグリッドレイアウトに基づいています。 ## 仕組み グリッドシステムは `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"}} ## Fluid grids Fluid grids use columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dramatically. ### Basic grid 列幅はすべてのブレークポイント（つまり `xs` ）に適用されます。 {{"demo": "pages/components/grid/CenteredGrid.js"}} ### ブレークポイント付きGrid 一部の列では複数の幅が定義されているため、定義されたブレークポイントでレイアウトが変更されます。 {{"demo": "pages/components/grid/FullWidthGrid.js"}} ## インタラクティブ 以下は、さまざまな設定の視覚的な結果を調べることができるインタラクティブなデモです。 {{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true}} ## 自動レイアウト 自動レイアウトは、 *個の項目* が使用可能なスペースを公平に共有するようにします。 これはまた、 *アイテム* 幅を設定できることを意味し、他のアイテムは自動的にその周囲のサイズを変更します。 {{"demo": "pages/components/grid/AutoGrid.js"}} ## 複雑なグリッド 以下のデモは、Material Designには従っていませんが、グリッドを使用して複雑なレイアウトを構築する方法を示しています。 {{"demo": "pages/components/grid/ComplexGrid.js"}} ## Nested Grid ` container ` と ` item ` プロパティは、2つの独立したブール値です。それらは組み合わせることができます。 > Flex ** container ** は、 `flex` または `inline-flex`を持つ要素によって生成されたボックスです。 フレックスコンテナのインフローの子は、flex ** items ** と呼ばれ、flexレイアウトモデルを使用してレイアウトされます。 https://www.w3.org/TR/css-flexbox-1/#box-model {{"demo": "pages/components/grid/NestedGrid.js"}} ## 制限事項 ### Negative margin 項目間の間隔を実装するために使用する負のマージンには1つ制限があります。 負のマージンが ``を超えると水平スクロールが表示されます。 回避策は3つあります。 1. スペーシング機能を使用し、ユーザ空間でそれを実装していない ` spacing ={0}` （デフォルト）。 2. 子に適用された間隔値の少なくとも半分を使用して、親にパディングを適用します。 ```jsx