CSS グリッドレイアウト
グリッドは、交差する水平線と垂直線の集まりであり、グリッドの列と行を定義します。
CSS は、行と列を備えたグリッドベースのレイアウトシステムを提供し、フロートやポジショニングを使用せずに Web ページをより簡単にデザインできるようにします。
以下は、グリッドレイアウトを使用したシンプルな Web ページレイアウトで、6 列と 3 行で構成されています：
ブラウザサポート
現在、最新の一部のブラウザバージョンはグリッドレイアウトをサポートしています。
| 57.0 | 16.0 | 52.0 | 10 | 44 |
グリッド要素
グリッドレイアウトは、1 つの親要素と 1 つ以上の子要素で構成されます。
例
試してみる »
display プロパティ
HTML 要素が display プロパティを grid または inline-grid に設定すると、その要素はグリッドコンテナになり、この要素のすべての直接の子要素がグリッド要素になります。
グリッドトラック
私たちはgrid-template-columnsとgrid-template-rowsプロパティを使用して、グリッドの列と行を定義します。
これらのプロパティはグリッドのトラックを定義します。グリッドトラックとは、グリッド内の任意の 2 本の線の間のスペースです。
下の図では、緑色の枠のトラック（グリッドの最初の行トラック）を見ることができます。2 行目には 3 つの白色の枠のトラックがあります。
次の例では、私たちはgrid-template-columnsプロパティを使用して、グリッドコンテナに 4 つの列を作成します：
次の例では、私たちはgrid-template-rowsプロパティを使用して、グリッドコンテナに行の高さを設定します：
fr 単位
トラックは、任意の長さの単位を使用して定義できます。
グリッドはfr単位を導入して、柔軟なグリッドトラックを作成できるようにしています。1 つの fr 単位は、グリッドコンテナ内の利用可能なスペースの 1 等分を表します。
次の例では、利用可能なスペースに応じて拡大および縮小する、同じ幅の 3 つのトラックを作成するグリッドを定義しています。
グリッドセル
グリッドセルは、グリッド要素内の最小の単位であり、概念的にはテーブルのセルとよく似ています。先ほどの例を振り返ってみましょう。グリッド要素が親要素内で定義されると、その子要素は、事前に定義された各グリッドセルに配置されます。下の図では、最初のグリッドセルをハイライトしています。
グリッドエリア
グリッド要素は、行または列の方向に 1 つ以上のセルを拡張でき、グリッドエリアを作成します。グリッドエリアの形状は矩形でなければなりません。つまり、「L」字型のようなグリッドエリアを作成することはできません。下の図でハイライトされているグリッドエリアは、2 列と 2 行に拡張されています。
グリッド列
グリッド要素の垂直線の方向を列（Column）と呼びます。
グリッド行
グリッド要素の水平線の方向を行（Row）と呼びます。
グリッドギャップ
グリッドギャップ（Column Gap）とは、2 つのグリッドセル間のグリッド横方向の間隔またはグリッド縦方向の間隔のことです。
以下のプロパティを使用して、ギャップのサイズを調整できます。
- grid-column-gap
- grid-row-gap
- grid-gap
次の例では、grid-column-gapプロパティを使用して、列間のグリッドギャップを設定します。
次の例では、grid-row-gapプロパティを使用して、行間のグリッドギャップを設定します。
grid-gapプロパティは、grid-row-gap および grid-column-gap プロパティの省略形です。
grid-gapプロパティは、行間の間隔と列間の間隔を同時に設定できます。
グリッドライン
列と列、行と行の間の境界線がグリッドラインです。
Grid は、番号付けされたグリッドラインを作成し、各グリッド要素を配置できるようにします。
たとえば、次の 3 列 2 行のグリッドには、4 本の縦方向のグリッドライン（灰色の丸でマーク）と 3 本の横方向のグリッドライン（黒い丸でマーク）があります。
グリッド要素を設定する際に、これらの行番号を参照できます。
下の図では、4 本の縦方向のグリッドラインと 4 本の横方向のグリッドラインが定義されています。
グリッドラインの番号の順序は、文書の書字方向によって異なります。左から右に書く言語では、番号 1 のグリッドラインは一番左にあります。右から左に書く言語では、番号 1 のグリッドラインは一番右にあります。
次に、grid-column-start、grid-column-end、grid-row-start、grid-row-end プロパティを使用して、グリッドラインの使用方法を説明します。
次の例では、グリッド要素のグリッドラインを 1 列目から開始し、3 列目で終了するように設定します。
次の例では、グリッド要素のグッドラインを 1 行目から開始し、3 行目で終了するように設定します。
CSS グリッドプロパティ
| プロパティ | 説明 |
|---|---|
| column-gap | 列間のギャップを指定します |
| gap | row-gapとcolumn-gapの省略形プロパティ |
| grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns、およびgrid-auto-flowの省略形プロパティ |
| grid-area | グリッド要素の名前を指定します。またはgrid-row-start, grid-column-start, grid-row-end、およびgrid-column-endの省略形プロパティ |
| grid-auto-columns | デフォルトの列サイズを指します |
| grid-auto-flow | 自動レイアウトアルゴリズムの動作方法を指定し、グリッド内で自動レイアウトされる要素の配置方法を正確に指定します。 |
| grid-auto-rows | デフォルトの行サイズを指します |
| grid-column | grid-column-startとgrid-column-endの省略形プロパティ |
| grid-column-end | グリッド要素の列の終了位置を指定します |
| grid-column-gap | グリッド要素のギャップサイズを指定します |
| grid-column-start | グリッド要素の列の開始位置を指定します |
| grid-gap | grid-row-gapとgrid-column-gapの省略形プロパティ |
| grid-row | grid-row-startとgrid-row-endの省略形プロパティ |
| grid-row-end | グリッド要素の行の終了位置を指定します |
| grid-row-gap | グリッド要素の行間のギャップを指定します |
| grid-row-start | グリッド要素の行の開始位置を指定します |
| grid-template | grid-template-rows, grid-template-columnsとgrid-areasの省略形プロパティ |
| grid-template-areas | 名前付きグリッド要素を使用して、行と列の表示方法を指定します |
| grid-template-columns | 列のサイズ、およびグリッドレイアウト内で設定する列の数を指定します |
| grid-template-rows | グリッドレイアウト内の行のサイズを指定します |
| row-gap | 2 つの行間の間隔を指定します |
その他の拡張次に、私たちはCSS グリッドレイアウトミニゲームを使用して、学習の成果を確認できます。