CSS Grid Layoutの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説

CSS Grid Layoutでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。これらは今まで使ってきたものとは大きく異なるため、CSS Grid Layoutを始めるのを難しく感じさせるかもしれません。

CSS Grid Layoutの実装に役立つ基礎知識、コンセプト、主要なプロパティと用語をくわしく解説します。

サイトのキャプチャ

CSS Grid Layout Terminology, Explained

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSS Grid Layoutの仕様

CSS Grid Layoutの仕様では、グリッドは次のように定義されています。

グリッドは、グリッドコンテナのスペースをグリッドエリアに分割する水平と垂直のグリッドラインが交差するセットです。グリッドコンテナのスペースをグリッドエリア(グリッドコンテナのコンテンツ)に配置することができます。

今まで使わなかった用語がたくさんありますね。
これらの用語を理解することで、CSS Grid Layoutの実装が簡単に思えるようになります。

「グリッドコンテナ」と「グリッドアイテム」とは

グリッドを使用するには、まずは「グリッドコンテナ(grid container)」から始めます。これは名前が示すとおり、グリッドの要素を内包する要素です。
displayプロパティで値に設定すると、「グリッドコンテナ」が作成されます。

「グリッドコンテナ」のプロパティの値は、flexboxやtableに似ています。
flexboxだと、display: flex; display; inline-flex;。
tableだと、display: table; display: inline-table;。

グリッドコンテナのキャプチャ

ブルーのラインで囲った要素が「グリッドコンテナ」

「グリッドコンテナ」は、子要素である「グリッドアイテム(grid item)」の新しいグリッドフォーマットのコンテキストを確立します。
また「グリッドアイテム」には特別なルールがあるので、注意が必要です。

  • floatおよびclearプロパティは「グリッドアイテム」には適用されません。
  • vertical-alignプロパティは「グリッドアイテム」には適用されません。
  • ::first-lineと::first-letterの擬似要素は「グリッドコンテナ」には適用されません。

他の事例は、下記をご覧ください。

「グリッドライン」とは

「グリッドライン(grid line)」とは、グリッドを分割する水平線と垂直線です。水平と垂直の各「グリッドライン」は参照できる番号を持っており、グリッドコンテナの最も外側の境界から始まります。

グリッドラインのキャプチャ

「グリッドライン」の水平・垂直線と参照番号

「グリッドライン」の参照番号は、「グリッドアイテム」をコンテナ内に配置するときに使用されます。「グリッドアイテム」を指定した「グリッドライン」に配置するか、「グリッドライン」を別の「グリッドライン」にまたがるように配置することもできます。

グリッドアイテムの配置

「グリッドアイテム」を水平の2、垂直のスタートは1でエンドは3で、配置

「グリッドライン」は、制作者が指定した名前で参照することもできます。下記のコードでは、同じ結果を得られますが、名前付きの「グリッドライン」を使用しています。

「グリッドカラム」「グリッドロウ」「グリッドトラック」とは

「グリッドカラム(grid column)」とは、隣接する2つの垂直の「グリッドライン」間のスペースです。「グリッドカラム」のサイズは、grid-template-columnsプロパティによって決まります。

「グリッドロウ(grid row)」とは、隣接する2つの水平の「グリッドライン」間のスペースです。サイズはgrid-template-rowsプロパティによって決まります。

グリッドカラムとグリッドロウの指定

「グリッドカラム」と「グリッドロウ」の指定

「fr」はfraction(割合)の略で、利用可能なスペースを補助単位で分割した「1」つ分の領域が割り当てられます。このケースでは、全体から65px+65pxをマイナスした分になります。詳しくは下記をご覧ください。

「グリッドトラック(grid track)」とは、「グリッドカラム」または「グリッドロウ」を示す一般的な用語です。

「グリッドセル」とは

「グリッドセル(grid cell)」とは、「グリッドカラム」と「グリッドロウ」の間の交差点です。これは、正確に4つの「グリッドライン」で囲まれたスペースであり、グリッド内で使用可能な最小のスペースになります。

グリッドセル

「グリッドライン」で囲まれたピンクのスペースが「グリッドセル」

「グリッドエリア」とは

「グリッドエリア(grid area)」とは、「グリッドコンテナ」内の4つの「グリッドライン」で囲まれたスペースの任意のエリアです。
エリアは少なくとも1つ以上の隣接した「グリッドセル」から構成されなければなりません。これは、すべての「グリッドセル」も「グリッドエリア」であることを意味します。

グリッドエリア

グリッドエリア

grid-areaプロパティを使用して要素を「グリッドエリア」にし、そのエリアをgrid-template-areasプロパティを使用して、グリッドでスペースにそのエリアを割り当てることができます

「グリッド」とは

「グリッド(grid)」とは、これらすべてが合わさったものです。定義をもう一度見てみましょう。

グリッドは、グリッドコンテナのスペースをグリッドエリアに分割する水平と垂直のグリッドラインが交差するセットです。グリッドコンテナのスペースをグリッドエリア(グリッドコンテナのコンテンツ)に配置することができます。

最初に見た時とは違い、用語も理解できるようになったと思います。

サイトのキャプチャ

CSS Grid Layout Terminology, Explained

top of page

©2017 coliss