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

Post on:2017年4月14日

CSS Gridの仕様

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

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

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

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

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

.grid-container {
    display: grid; /* ブロックレベルのグリッドコンテナを作成 */
    display: inline-grid; /* インラインレベルのグリッドコンテナを作成 */
    display: subgrid; /* グリッドコンテナでもあるグリッドアイテムで使用 */
}

.grid-container {

display: grid; /* ブロックレベルのグリッドコンテナを作成 */

display: inline-grid; /* インラインレベルのグリッドコンテナを作成 */

display: subgrid; /* グリッドコンテナでもあるグリッドアイテムで使用 */

}

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

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

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

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

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

CSS Gridを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか

「グリッドライン」とは

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

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

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

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.grid-item {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.grid-container {

display: grid;

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

}

.grid-item {

grid-column: 2;

grid-row-start: 1;

grid-row-end: 3;

}

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

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

.grid-container {
    display: grid;
    grid-template-columns: 100px [grid-item-start] 100px [grid-item-end] 100px;
    grid-template-rows: [grid-item-start] 100px 100px [grid-item-end] 100px;
}
.grid-item {
    grid-column: grid-item-start / grid-item-end;
    grid-row-start: grid-item-start;
    grid-row-end: grid-item-end;
}

.grid-container {

display: grid;

grid-template-columns: 100px [grid-item-start] 100px [grid-item-end] 100px;

grid-template-rows: [grid-item-start] 100px 100px [grid-item-end] 100px;

}

.grid-item {

grid-column: grid-item-start / grid-item-end;

grid-row-start: grid-item-start;

grid-row-end: grid-item-end;

}

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

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

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

.grid-container {
    display: grid;
    grid-template-columns: 65px 1fr 65px;
    grid-template-rows: 100px 100px 100px;
}

.grid-container {

display: grid;

grid-template-columns: 65px 1fr 65px;

grid-template-rows: 100px 100px 100px;

}

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

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

「CSS Grid」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル

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

「グリッドセル」とは

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

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

「グリッドエリア」とは

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

グリッドエリア

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

.outlined {
    grid-area: outlined;
    border: 2px solid purple;
}

.grid-container {
    display: grid;
    grid-template-areas: "outlined outlined ."
                         "outlined outlined ."
                         ". . .";
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}