Gridでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。Gridを始めるのを難しく感じさせるかもしれません。Gridの実装に役立つ基礎知識、コンセプト、主要なプロパティと用語をくわしく解説します。Explained下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Gridの仕様では、グリッドは次のように定義されています。グリッドは、グリッドコンテナのスペースをグリッドエリアに分割する水平と垂直のグリッドラインが交差するセットです。グリッドコンテナのスペースをグリッドエリア(グリッドコンテナのコンテンツ)に配置することができます。今まで使わなかった用語がたくさんありますね。Gridの実装が簡単に思えるようになります。container)」から始めます。これは名前が示すとおり、グリッドの要素を内包する要素です。displayプロパティで値に設定すると、「グリッドコンテナ」が作成されます。*/}「グリッドコンテナ」のプロパティの値は、flexboxやtableに似ています。inline-flex;。inline-table;。item)」の新しいグリッドフォーマットのコンテキストを確立します。「グリッドアイテム」には特別なルールがあるので、注意が必要です。floatおよびclearプロパティは「グリッドアイテム」には適用されません。vertical-alignプロパティは「グリッドアイテム」には適用されません。::first-lineと::first-letterの擬似要素は「グリッドコンテナ」には適用されません。他の事例は、下記をご覧ください。line)」とは、グリッドを分割する水平線と垂直線です。水平と垂直の各「グリッドライン」は参照できる番号を持っており、グリッドコンテナの最も外側の境界から始まります。「グリッドライン」の参照番号は、「グリッドアイテム」をコンテナ内に配置するときに使用されます。「グリッドアイテム」を指定した「グリッドライン」に配置するか、「グリッドライン」を別の「グリッドライン」にまたがるように配置することもできます。「グリッドライン」は、制作者が指定した名前で参照することもできます。下記のコードでは、同じ結果を得られますが、名前付きの「グリッドライン」を使用しています。column)」とは、隣接する2つの垂直の「グリッドライン」間のスペースです。「グリッドカラム」のサイズは、grid-template-columnsプロパティによって決まります。row)」とは、隣接する2つの水平の「グリッドライン」間のスペースです。サイズはgrid-template-rowsプロパティによって決まります。「fr」はfraction(割合)の略で、利用可能なスペースを補助単位で分割した「1」つ分の領域が割り当てられます。このケースでは、全体から65px+65pxをマイナスした分になります。詳しくは下記をご覧ください。track)」とは、「グリッドカラム」または「グリッドロウ」を示す一般的な用語です。cell)」とは、「グリッドカラム」と「グリッドロウ」の間の交差点です。これは、正確に4つの「グリッドライン」で囲まれたスペースであり、グリッド内で使用可能な最小のスペースになります。area)」とは、「グリッドコンテナ」内の4つの「グリッドライン」で囲まれたスペースの任意のエリアです。エリアは少なくとも1つ以上の隣接した「グリッドセル」から構成されなければなりません。これは、すべての「グリッドセル」も「グリッドエリア」であることを意味します。100px;}「グリッド」とは「グリッド(grid)」とは、これらすべてが合わさったものです。定義をもう一度見てみましょう。グリッドは、グリッドコンテナのスペースをグリッドエリアに分割する水平と垂直のグリッドラインが交差するセットです。グリッドコンテナのスペースをグリッドエリア(グリッドコンテナのコンテンツ)に配置することができます。最初に見た時とは違い、用語も理解できるようになったと思います。