ion-grid
グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのFlexboxシステムです。グリッド、行、列の3つのユニットで構成されています。列は行を埋めるように展開し、列を追加するとサイズが変更されます。これは、画面サイズに基づいた異なるブレークポイントを持つ12列のレイアウトに基づいています。列の数はCSSを使用してカスタマイズできます。
概要
- グリッドは、すべての行と列のコンテナとして機能します。グリッドはコンテナの全幅を占有しますが、
fixedプロパティを追加すると、画面サイズに基づいて幅が設定されます。以下の固定グリッドを参照してください。 - 行は、列を適切に配置する水平方向の列グループです。
- コンテンツは列内に配置する必要があり、列のみが行の直接の子にできます。
sizeプロパティは、行あたりデフォルトの12列のうち、使用する列の数を示します。したがって、グリッドの1/3、または12列のうち4列を占めるには、size="4"を列に追加できます。- サイズの値がない列は、自動的に等しい幅になります。たとえば、4つの列はそれぞれ自動的に幅が25％になります。
- 列の幅はパーセンテージで設定されるため、常に流動的で、親要素に対して相対的にサイズが設定されます。
- 個々の列の間にはパディングがあります。ただし、グリッドに
ion-no-paddingクラスを追加することで、グリッドと列からパディングを削除できます。グリッドに適用できるその他のスタイルについては、CSSユーティリティを参照してください。 - 5つのグリッド層があり、それぞれがレスポンシブブレークポイントに対応しています：すべてのブレークポイント（エクストラスモール）、スモール、ミディアム、ラージ、エクストララージ。
- グリッド層は最小幅に基づいており、その層とそれより大きいすべての層に適用されます（例：
size-sm="4"はスモール、ミディアム、ラージ、エクストララージのデバイスに適用されます）。 - グリッドは、CSS変数を使用してカスタマイズできます。グリッドのカスタマイズを参照してください。
デフォルトのブレークポイント
グリッドのデフォルトのブレークポイントと、対応するプロパティは以下の表に定義されています。ブレークポイント値は現時点ではカスタマイズできません。カスタマイズできない理由の詳細については、メディアクエリの変数を参照してください。
| 名前 | 値 | 幅プロパティ | オフセットプロパティ | プッシュプロパティ | プルプロパティ | 説明 |
|---|---|---|---|---|---|---|
| xs | 0 | size | offset | push | pull | (最小幅: 0) のときの列を設定 |
| sm | 576px | sizeSm | offsetSm | pushSm | pullSm | (最小幅: 576px) のときの列を設定 |
| md | 768px | sizeMd | offsetMd | pushMd | pullMd | (最小幅: 768px) のときの列を設定 |
| lg | 992px | sizeLg | offsetLg | pushLg | pullLg | (最小幅: 992px) のときの列を設定 |
| xl | 1200px | sizeXl | offsetXl | pushXl | pullXl | (最小幅: 1200px) のときの列を設定 |
基本的な使い方
デフォルトでは、列はすべてのデバイスと画面サイズで行内で等しい幅を占有します。
固定グリッド
グリッドはコンテナの100％の幅を占めます。グリッドにfixedプロパティを追加すると、幅は画面サイズに基づいて設定されます。各ブレークポイントのグリッドの幅は以下の表にリストされていますが、カスタマイズできます。詳細については、グリッドのカスタマイズを参照してください。以下の例をStackBlitzで開き、画面サイズを変更してグリッドの幅が変化するのを確認してください。
| 名前 | 値 | 説明 |
|---|---|---|
| xs | 100% | xs画面の場合、幅は100％です |
| sm | 540px | (最小幅: 576px) の場合、グリッドの幅を540pxに設定 |
| md | 720px | (最小幅: 768px) の場合、グリッドの幅を720pxに設定 |
| lg | 960px | (最小幅: 992px) の場合、グリッドの幅を960pxに設定 |
| xl | 1140px | (最小幅: 1200px) の場合、グリッドの幅を1140pxに設定 |
列のサイズ
列は、合計列数に対して特定の数を占有するように特定サイズに設定するか、コンテンツに基づいて幅をサイズ変更できます。デフォルトの列数は12ですが、これはカスタマイズできます。詳細については、以下の列数のセクションを参照してください。
コンテンツベースのサイズ
sizeを"auto"に設定すると、列はコンテンツの自然な幅に基づいてサイズを調整できます。これは、列を特定のピクセル数などの絶対幅に設定する場合に必要です。自動幅の列の隣にある列は、行を埋めるようにサイズが変更されます。
指定されたサイズ
列のsizeを設定すると、他の列は自動的にその周りのサイズが変更されます。すべての列でサイズが指定されていて、合計列数に達しない場合は、列の後ろに空きスペースができます。
レスポンシブサイズ
sizeプロパティは、すべてのブレークポイントで列の幅を変更します。列は、ブレークポイント名を "size" の末尾に追加した、いくつかのサイズプロパティも提供します。これらのプロパティを使用すると、画面サイズに基づいて列の幅を変更できます。以下の例をStackBlitzで開き、画面サイズを変更して列の幅が変化するのを確認してください。
列のオフセット
列は、合計列数に対して特定の数の列だけ右に移動するようにオフセットできます。
指定されたオフセット
offsetプロパティを使用すると、列を右に移動できます。このプロパティは、指定された列数だけ列の左マージンを増やします。また、存在する場合は、右側の列も移動します。
レスポンシブオフセット
offsetプロパティは、すべてのブレークポイントで列の左マージンを変更します。列は、ブレークポイント名を "offset" の末尾に追加した、いくつかのオフセットプロパティも提供します。これらのプロパティを使用すると、画面サイズに基づいて列のオフセットを変更できます。以下の例をStackBlitzで開き、画面サイズを変更して列のオフセットが変化するのを確認してください。
列のプッシュとプル
カラムは、総カラム数に対して、特定のカラム数分だけ右にプッシュしたり、左にプルしたりできます。
プッシュとプルの指定
push および pull プロパティを追加して、カラムの順序を変更します。これらのプロパティは、指定されたカラム数だけカラムの left および right を調整し、カラムの順序を簡単に変更できるようにします。これにより、別のカラムが配置されている場所にシフトすると、カラムが重なり合う可能性があります。
レスポンシブなプッシュとプル
push および pull プロパティは、すべての ブレークポイントに対してカラムの位置を変更します。また、カラムには、"push" / "pull" の末尾にブレークポイント名が追加された、いくつかの push および pull プロパティが用意されています。これらのプロパティを使用すると、画面サイズに基づいてカラムの位置を変更できます。以下の例を StackBlitz で開き、画面サイズを変更して、カラムの位置が変化するのを確認してください。
配置
垂直方向の配置
すべてのカラムは、行に異なるクラスを追加することで、行内で垂直方向に配置できます。使用可能なクラスの一覧については、css ユーティリティを参照してください。
水平方向の配置
すべてのカラムは、行に異なるクラスを追加することで、行内で水平方向に配置できます。使用可能なクラスの一覧については、css ユーティリティを参照してください。
グリッドのカスタマイズ
組み込みの CSS 変数を使用することで、事前定義されたグリッド属性をカスタマイズできます。パディング、カラム数などの値を変更してください。
固定幅
固定グリッドの幅は、すべてのブレークポイントに対して --ion-grid-width CSS 変数で設定できます。個々のブレークポイントをオーバーライドするには、--ion-grid-width-{breakpoint} CSS 変数を使用します。各ブレークポイントのデフォルト値は、固定グリッドセクションにあります。以下の例を StackBlitz で開き、画面サイズを変更して、グリッド幅が変化するのを確認してください。
カラム数
グリッドのカラム数は、--ion-grid-columns CSS 変数で変更できます。デフォルトでは 12 グリッドカラムですが、これを任意の正の整数に変更して、個々のカラムの幅を計算するために使用できます。
パディング
グリッドコンテナのパディングは、すべてのブレークポイントに対して --ion-grid-padding CSS 変数で設定できます。個々のブレークポイントをオーバーライドするには、--ion-grid-padding-{breakpoint} CSS 変数を使用します。
カラムのパディングは、すべてのブレークポイントに対して --ion-grid-column-padding CSS 変数で設定できます。個々のブレークポイントをオーバーライドするには、--ion-grid-column-padding-{breakpoint} CSS 変数を使用します。
プロパティ
fixed
| 説明 | true の場合、グリッドは画面サイズに基づいて固定幅になります。 |
| 属性 | fixed |
| 型 | boolean |
| デフォルト | false |
イベント
このコンポーネントでは、利用可能なイベントはありません。
メソッド
このコンポーネントでは、利用可能なパブリックメソッドはありません。
CSS シャドウパーツ
このコンポーネントでは、利用可能な CSS シャドウパーツはありません。
CSS カスタムプロパティ
| 名前 | 説明 |
|---|---|
--ion-grid-padding | グリッドのパディング |
--ion-grid-padding-lg | lg 画面でのグリッドのパディング |
--ion-grid-padding-md | md 画面でのグリッドのパディング |
--ion-grid-padding-sm | sm 画面でのグリッドのパディング |
--ion-grid-padding-xl | xl 画面でのグリッドのパディング |
--ion-grid-padding-xs | xs 画面でのグリッドのパディング |
--ion-grid-width | 固定グリッドの幅 |
--ion-grid-width-lg | lg 画面での固定グリッドの幅 |
--ion-grid-width-md | md 画面での固定グリッドの幅 |
--ion-grid-width-sm | sm 画面での固定グリッドの幅 |
--ion-grid-width-xl | xl 画面での固定グリッドの幅 |
--ion-grid-width-xs | xs 画面での固定グリッドの幅 |
スロット
このコンポーネントでは、利用可能なスロットはありません。