CSS Grid Layout（以下グリッドレイアウト）とは2次元グリッドレイアウトを構築できるレイアウトモジュールのことです。
グリッドレイアウトを使うと、従来の手法に比べてウェブサイトのレイアウトが作りやすくなります。
今回はグリッドレイアウトの用語や基本的な使い方を紹介します。
用語
グリッドコンテナ
グリッド全体を囲む要素です。
display: grid; または display: inline-grid; を指定することで、その要素はグリッドレイアウトのコンテナになります。
グリッドアイテム
グリッドコンテナ直下の子要素のこと。実際にグリッド上に配置される要素です。
グリッドライン
グリッドをわける垂直および水平線のことです。グリッドの上下左右それぞれン長短にも存在し、上もしくは左から１から順に正の番号が振られています。（下もしくは右からは-1から順に負の番号が振られている）
グリッドトラック
グリッドの行および列のことです。グリッド上の2本の線の間にある空間のことを指しています。
grid-template-columnsプロパティを指定すると、列トラックのサイズが定義できます。
grid-template-rowsプロパティを指定すると、行トラックのサイズが定義できます。
/* 3列の幅をそれぞれ150pxに指定 */ grid-template-columns: 150px 150px 150px; /* 1行目を150pxに、2行目を50pxに指定 */ grid-template-rows: 150px 50px;
See the Pen Grid トラック by Nishimura Shiori (@shtg11) on CodePen.0
fr単位
トラックは、どの長さの単位でも定義できます。グリッドには、柔軟なグリッドトラックを作れるように、追加の新しいfr単位が導入されています。
fr単位は、グリッドコンテナ内の利用可能な空間の分数（a fraction）を表します。
- 幅が3等分されたトラックを作成
See the Pen Grid トラック2 by Nishimura Shiori (@shtg11) on CodePen.0
- １つの2frトラックと２つの1frトラックを作成（２：１：１）
See the Pen Grid トラック3 by Nishimura Shiori (@shtg11) on CodePen.0
グリッドセル
隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小の単位のことです。表のセルのようなもの。
セル間隔は、column-gap、row-gapプロパティ、および短縮プロパティのgapで作成できます。
/* 行の間隔を2emに設定 */ row-gap: 2em;
See the Pen セル間隔 by Nishimura Shiori (@shtg11) on CodePen.0
グリッドエリア
１つあるいは複数のセルが結合してできるセルの集まりです。エリアには名前を付けることができ、アイテムを配置することができます。
次回はよく使用されているレイアウトを実際に作成してみます。
