段組が自由自在！「CSSグリッド」をより使いこなすための4つのTips

CSSグリッドは、これまで登場したTABLEレイアウト、Floatによる回り込みのレイアウト、そしてFlexboxを使ったレイアウトのどのレイアウト手法よりも直感的に扱える、注目のモジュールです。
2017年に入って、macOSやiOSがCSSグリッドに対応する形でSafariに搭載され、いよいよ全てのモダンブラウザで使用することができるようにもなりました。

参考：
これで分かった！10分でほとんど理解できる「CSSグリッド」の基礎

ところで、CSSグリッドレイアウトの基本的な使い方に関してはなんとなく理解できた人もいるかと思いますが、もう一段階先に進みたいと思っている方もいるのではないでしょうか。
実際、CSSグリッドは非常に柔軟で拡張性が高いので、知っておいて損はないTips(コツ)がたくさんあります。

そこで本稿では、CSSグリッドをより使いこなすための4つのTipsをまとめていきます。

CSSグリッドで最低限押さえておきたい基本事項

まずは、CSSの基本事項に関しておさらいをしておきましょう。

CSSグリッドは2次元的なレイアウト手法

筆者作成

CSSグリッドがこれまでのレイアウト手法と大きく異なる点は、CSSグリッドが「2次元レイアウト」(two-dimentional layout)を採用している点です。
つまり、ブロックを作って並べるのではなく、1枚のブロックを縦方向や横方向に区切っていく、という考え方です。

グリッドコンテナーとグリッドアイテム

筆者作成

CSSグリッドによるレイアウトは、親要素であるグリッドコンテナーの中に子要素であるグリッドアイテムを複数入れて行います。

CSSによってグリッドコンテナー自体が縦横に分割され、そこにグリッドアイテムを当て込んでいくイメージです。

CSSグリッドをより使いこなすための4つのTips

1. グリッドエリアに名前をつける

グリッドコンテナーを行と列に分割する場合に、「content-template-areas」プロパティを使ってエリアに名前をつけることができます。
例えば、下記のような場合では、9分割したグリッドコンテナーのエリアに名前をつけています。

.site{
　　display: grid;
　　grid-template-colmn: 2fr 1fr 1fr;
　　grid-template-rows: 1fr 1fr 2fr;
　　grid-template-areas:
　　　“title title title”
　　　“main header header”
　　　“main sidebar footer”
}

このように指定すると、下図のように名前がつけられたことになります。
同じ名前をつけているエリアがあるという点は、非常に重要です。

筆者作成

続いて、各エリアに「grid-area」プロパティを使ってグリッドアイテムを流し込んでいきます。

.page-title{
　　grid-area: title;
}

.masthead{
　　grid-area: header;
}

// 以下同様

このようにすることで、グリッドを流し込むことが可能です。

筆者作成

2. グリッドの行や列に名前をつける

実は、同様にグリッドの行や列の区切り線に名前をつけながら、同時に大きさを指定する方法もあります。
それは、「grid-template-columns」や「grid-template-rows」にブラケットを使って名前を指定する方法です。

コンセプトを理解するために基本的なレイアウトを考えてみましょう。

.container {
　　grid-template-rows: [row1] 1fr [row2] 2fr [row3];
　　grid-template-columns: [col1] 2fr [col2] 1fr [col3] 1fr [col4];
}

上記の例では、それぞれの線に名前をつけています。

筆者作成

このとき、グリッドアイテムを指定するときに、行番号・列番号ではなく行や列の区切り線の名前で指定することも可能です。

.page-title{
　　grid-area: row1 / col1 / row2 / col3;
}

.masthead{
　　grid-area: row2 / col1 / row3 / col2;
}

筆者作成

「grid-area」は「grid-row」と「grid-col」のショートハンドでもあるので、列と行の開始名・終了名を指定すればグリッドアイイテムを当て込むことができます。

3. グリッドの行や列を繰り返す

列や行を増やすには「grid-template-rows」「grid-template-columns」の値を増やせばいいのですが、トラックの数が多くなると書くのが面倒になってしまいます。

例えば、以下のような場合を考えてみましょう。

.container {
　　display: grid;
　　grid-template-rows: 100px 80px 100px 80px 100px;
　　grid-template-columns: 120px 120px 120px 120px 120px;
}

以上のような場合、繰り返し処理が有効な部分は、「repeat(x, y)」という関数を使うことができます。
xには繰り返す回数、yにはトラックの幅を指定します。

これを適用すると以下のようなコードになります。

.container {
　　display: grid;
　　grid-template-rows: repeat(2, 100px 80px) 100px;
　　grid-template-columns: repeat(5, 120px);
}

少しですが、これで短くすることができました。
Webアプリケーションなど、動的に表の列や行を動かす際には、JavaScriptでのDOM操作と組み合わせて使うと効力を発揮しそうです。

4. grid-templateプロパティを活用する

グリッドコンテナーに指定できるプロパティに「grid-template」という便利なものがあります。
面白いことに、使い方が2通りあるので、それぞれを順を追って解説していきます。

A. grid-template-rows / grid-template-columns のショートハンドとして使う

これまで見てきたように、列や行を増やすには「grid-template-rows」「grid-template-columns」を指定する必要があります。

.container {
　　display: grid;
　　grid-template-rows: 100px 100px;
　　grid-template-columns: 120px 120px 120px;
}

これを「grid-template」タグによってショートハンドで記述することができます。
列・行の順にスラッシュで記述します。

.container {
　　display: grid;
　　grid-template: 100px 100px / 120px 120px 120px;
}

B. grid-template-rows / grid-template-columns / grid-template-areas のショートハンドとして使う

Aで見たものに加えて、1で見た「grid-template-areas」も織り交ぜてショートハンドで使うという面白い使い方もあります。

まず、「grid-template-areas」を書きます。

.site{
　　display: grid;
　　grid-template-areas:
　　　“areaA areaB areaC”
　　　“areaD areaE areaF”
}

ここに、それぞれの列と行の高さをしていします。
行の高さは文字列の後に、列の幅はスラッシュの後に書きます。

.site{
　　display: grid;
　　grid-template:
　　　“areaA areaB areaC” 100px
　　　“areaD areaE areaF” 100px
　　　/ 120px 120px 120px
}

慣れれば、エリア名とトラックの大きさが一見して分かるので、こちらの方が分かりやすい指定方法だと言えるでしょう。

まとめ

CSSグリッドを使いこなせるようになれば、複雑な段組のレイアウトも自由自在に配置することができるようになります。

しかし、柔軟でいろいろなことができる反面、慣れるまでは少し時間がかかってしまうかもしれません。
そのような場合には、今回のようなポイント集を活用して、ぜひ実践的な練習をしてみてはいかがでしょうか。