最近よく見かけるようになったCSSのGridレイアウトですが、ブラウザ対応やとっつきにくいイメージもあり、導入へのハードルがあるのではないでしょうか。ただ、使いこなすととても便利なものなので、ぜひマスターしておきたい技術ですよね。そこで今回から複数記事にわたり、CSSのGirdレイアウトについて色々とまとめていきたいと思います。
（こちらの記事も合わせてどうぞ）
CSSのFlexboxレイアウトをマスターするためのまとめ（Flexコンテナー編）
CSSのFlexboxレイアウトをマスターするためのまとめ（Flexアイテム編）
Girdを構成する要素について
過去記事でFlexboxレイアウトについても紹介していましたが、Gridレイアウトも同じでGridコンテナという親要素とGirdアイテムという子要素で構成されています。HTMLで記述するとこのような形です。
<div class="gird-container">
<div class="gird-item">
</div>
<div class="gird-item">
</div>
<div class="gird-item">
</div>
</div>
そして、親要素のGridコンテナ要素に対してCSSで指定すると、それらの要素にGridレイアウトが適用されます。Flexboxと同じくインライン要素として扱うことも可能です。またGirdレイアウトはIE11以下に対応していないため、ベンダープレフィックスの記述が必要になります。
.gird-container {
display: grid;
display: -ms-grid;
}
// Gridコンテナをインライン要素としたい場合
.gird-container {
display: inline-grid;
display: -ms-inline-grid;
}
このような形でGirdレイアウトを構築していきます。そして以下で紹介する各種プロパティを使って配置を調整していきます。
親要素の「Girdコンテナ」の振る舞いを指定する
ここでは親要素であるGirdコンテナに対して指定するプロパティをあげています。
| grid-template-rows |
各グリッドの行の高さを指定する、上から順に各行の数値を半角スペースで区切って指定 |
| grid-template-columns |
各グリッドの列の幅を指定する、左から順に各列の数値を半角スペースで区切って指定 |
| grid-template-areas |
グリッドコンテナ内に含まれるアグリッドイテムのエリアにまとめて名前を設定する。値は行ごとにダブルクオーテーションで囲み、その中で列ごとに半角スペースで区切る。 |
| grid-auto-rows |
グリッドコンテナからはみ出したグリッドアイテムに対してなど、グリッドの行で高さが設定されていない場合の時に適用させる各行の高さを指定する。 |
| grid-auto-columns |
グリッドコンテナからはみ出したグリッドアイテムに対してなど、グリッドの列で幅が設定されていない場合の時に適用させる各列の幅を指定する。 |
| grid-auto-flow |
グリッドの自動整列のルールを指定する。行の追加、列の追加、隙間を埋めるように配置といった振る舞いを指定できる。 |
| grid-row-gap |
グリッドコンテナに含まれるグリッドアイテム間のセルに対して行間の余白を設定する |
| grid-column-gap |
グリッドコンテナに含まれるグリッドアイテム間のセルに対して列間の余白を設定する |
| justify-content |
グリッドコンテナに含まれるグリッドアイテムの水平方向の配置を指定する |
| align-content |
グリッドコンテナに含まれるグリッドアイテムの垂直方向の配置を指定する |
| justify-items |
グリッドコンテナに含まれる全てのグリッドアイテムに対して、グリッドのエリア内における水平方向の配置を一括指定する。 |
| align-items |
グリッドコンテナに含まれる全てのグリッドアイテムに対して、グリッドのエリア内における垂直方向の配置を一括指定する。 |
子要素の「Girdアイテム」の振る舞いを指定する
そして子要素であるGirdアイテムに対して指定するプロパティです。
| grid-row |
グリッドアイテムのエリアに対して、行の開始位置と終了位置を指定する。 |
| grid-column |
グリッドアイテムのエリアに対して、列の開始位置と終了位置を指定する。 |
| grid-area |
個別のグリッドアイテムに直接名前を設定する。値にはそのまま指定する名前をつける |
| justify-self |
個別のグリッドアイテムに対して、グリッドのエリア内における水平方向の配置を単独で指定する。 |
| align-self |
個別のグリッドアイテムに対して、グリッドのエリア内における垂直方向の配置を単独で指定する。 |
| order |
グリッドアイテムに対して直接並び順の指定をする |
これらのプロパティを組み合わせることでいろんな配置をGirdレイアウトで実現していきます。詳しくは後日別記事にて紹介していきたいと思います。
ショートハンドでの記述
Girdレイアウトで使うプロパティにはショートハンドで記述できるものもあります。ショートハンドで記述することでCSS自体もスッキリさせることができます。慣れればできるだけショートハンドで記述していくようにしましょう。
【grid-template】
grid-template-rowsとgrid-template-columnsの値を続けて指定
.gird-container {
// grid-template-rows / grid-template-columns
grid-template: 10px 50px 50px / 100px 80px 120px;
}
【grid-gap】
grid-row-gapとgrid-column-gapの値を続けて指定
.gird-container {
// grid-row-gap / grid-column-gap
grid-gap: 40px 60px;
}
Internet Explorer 11への対応
とても便利なGirdレイアウトですが、残念ながらIE11ではベンダープレフィックスを付与したり、プロパティを調整する必要があります。またIE10以下では対応していません。それ以外でも一部ブラウザではサポートしていないものもいくつかあります。
とはいえ、まだIE11がある程度のシェアがあるということもあり、別途対応が必要になってくるのではないでしょうか。そこで下記にIE11への対応方法をまとめています。
1. ベンダープレフィックスやプロパティ名の変更が必要
一部プロパティは「-ms-」のベンダープレフィックスをつけたり、プロパティ自体も変更する必要があります。
.gird-container {
display: gird;
display: -ms-gird; // IE11対応
grid-template-colums: ……
-ms-grid-colums: …… // IE11対応
grid-template-rows: ……
-ms-grid-rows: …… // IE11対応
}
.gird-item {
align-self: ……
-ms-grid-column-align: …… // IE11対応
justify-self: ……
-ms-grid-row-align: …… // IE11対応
}
2. Girdアイテムの配置についての記述方法が異なる
grid-rowやとgrid-columnでGridアイテムの行列の開始位置を基準に指定した場合、下記の通り記述方法が少し変わります。開始位置を指定するプロパティ（grid-row-start、grid-column-start）をそれぞれ「-ms-grid-row-start」「-ms-grid-column-start」に変更し、終了位置までの幅及び高さをを「-ms-grid-row-span」「-ms-grid-column-span」で指定する必要があります。
.gird-item {
grid-column: 1 / 3;
grid-row: 1 / 4;
-ms-grid-column-start: 1; // IE11対応
-ms-grid-column-span: 2; // IE11対応
-ms-grid-row-start: 1; // IE11対応
-ms-grid-row-span: 3; // IE11対応
}
とても便利なGirdレイアウトですが、未対応ブラウザ対応は少し面倒になりますが、対象外とするのであれば導入のハードルもそこまで高くないのでは。今回の記事ではGridレイアウトのプロパティを中心にまとめていますが、次回はこれらを使って実際にレイアウトを組んでみたいと思います。
（参考にさせて頂いたサイト）
CSS3リファレンス
CSS GridをIE11、EDGEに対応させるために注意する点
CSS Grid Layout を極める！（基礎編）
categories