[CSS]CSSグリッドレイアウト基本の「き」
CSSグリッドレイアウトは新しい（といっても、昨年には勧告候補になっていた）レイアウトモジュールですが、今年の春に大きなシェアを占めるブラウザ全てにおいて実装が可能となったので、私も少しずつ学習していこうと思います。最近CSS周辺は覚えることが多いですが、まずは基本からやっていきましょう。
CSSグリッドレイアウトって？
もう既にいろいろなところでCSSグリッドレイアウトの記事が挙がっていますので、ここはわかりやすい説明があったページから引用します。
Webページを列と行に分割し、作成した列と行のサイズや位置、レイヤーの定義に基づいて構成要素の位置やサイズを決定できるというものです。
グリッドを使えば、HTMLをまったく変更せずにCSSだけで要素の位置を柔軟に変更できます。メディアクエリと併用すれば、さまざまなブレークポイントでのレイアウト変更が可能です。-WPJより
Flexboxもグリッドレイアウトに適したモジュールですが、一方向にしか並びを指定できないという弱点があります。CSSグリッドレイアウトはCSSに書くだけで要素の位置を変えることができてしまいます。
ブラウザの対応状況
今年の3月上旬にFirefoxとChromeは実装可能でしたが、Safariが3/27にバージョンアップしたことでCSSグリッドレイアウトを実装可能になりました。
InternetExplorer11とEdgeも実装できますが、一部使用不可能なプロパティもあります。
グリッド レイアウト (Windows) – MSDN – Microsoft
もともとはMicrosoftが最初にこのCSSグリッドレイアウトを提案したらしいです。
…しかし、Androidブラウザはアウトなんですね…
CSSグリッドレイアウトの構成
コードを書く前に、CSSグリッドレイアウトがどのような構造でできているかを説明します。
この記事を書こうと思いついた時に、文章だけ読んでいた私は理解に時間がかかりました…なので簡単な図を作ってみました。
グリッドコンテナとグリッドアイテム
display: grid; または display: inline-grid; を指定した要素を「グリッドコンテナ」、グリッドコンテナの直下の子要素を「グリッドアイテム」と呼びます。
グリッドアイテム内に置かれた孫要素には display: grid; が効きません…Flexboxと同じですね。
グリッドライン・グリッドトラック・グリッドセル・グリッドエリア
グリッドラインは、グリッドを横方向・縦方向に分割する罫線です。このラインは不可視ですが、グリッドの上下左右それぞれの両端にも存在し、上あるいは左から1から順に正の番号が振られています。同時に、下あるいは右からは-1から順に負の番号が振られています。
グリッドトラックは、各列や行のことです。隣接する2本のラインの間を表しています。
グリッドセルは、行のグリッドトラックと列のグリッドトラックが交差する箇所です。Excelや<table>のセルと似たような感じですね。ここにグリッドアイテムが配置されます。
グリッドエリアは、複数の行と列のグリッドトラックが交差する範囲です。これもExcelや<table>のセルの結合と似ています。グリッドエリアには名前が付けることができ、一つのグリッドセルに置かれたグリッドアイテムもグリッドエリアとして名前を付けられます。
実際に作ってみよう！
解説だけですと「？？？」となりますので、実際に作って構造と動きを確認してみましょう。
今回はとても簡単なものですが、前章で解説したほとんどのものを使います。
Flexboxでは作りづらい、上図のようなものを作っていきます。
マークアップ
構造自体は単純ですので、サクッといきます…以下のような文書構造をマークアップします。
1 2 3 4 5 6 7 | <div class="container"> <div class="grid-item-1">1</div> <div class="grid-item-2">2</div> <div class="grid-item-3">3</div> <div class="grid-item-4">4</div> <div class="grid-item-5">5</div> </div> |
今回はこれがグリッドアイテムということをはっきりさせるために、子要素のクラス名を .grid-item-$ としました。
ついでにグリッドアイテムの見た目を作っておきます。
1 2 3 4 5 | .grid-item-$ { background-color: #bbf; padding: 25px; border-radius: 6px; } |
5番目の要素についている .grid-item-5 だけは色を変えておきました。
まだ子要素が縦に並んでいるだけの状態ですね。
親要素「グリッドコンテナ」に display: grid; を指定する
本題であるグリッドレイアウトの根本です。親要素の .container に display: grid; を指定します。
また、グリッド間の余白は grid-gap で指定します。
1 2 3 4 | .container { display: grid; grid-gap: 10px; } |
まだ縦並びのままですが、子要素である「グリッドアイテム」に余白ができました。
グリッドのサイズを決める
各グリッドアイテムをタイル状に並べていきましょう。
- 横幅を決めるのはgrid-template-columns
- 縦幅を決めるのはgrid-template-rows
です。指定する数値は width や height と同じように “px” や “%”、 “auto” で指定ができます。
さらに、グリッドレイアウトでは “fr” という単位が使用できます。これは “ fraction（割合）” の略から来ています。
“%”でも問題なさそうですが、たくさんの行や列を扱う時に重宝しそうです。
どちらのプロパティも必要な子要素の分だけ区切って指定します。
今回の例では横に3つ、縦に2つ並べるので、それぞれ grid-template-columns: 1fr 1fr 1fr; と grid-template-rows: 50% 50%; と指定します。
1 2 3 4 5 6 | .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50% 50%; grid-gap: 10px; } |
不完全ながら、これでグリッドレイアウトになりました。
5番目のグリッドアイテムを配置する
他の子要素と違う色を指定した5番目のグリッドアイテムを配置します。再び図を使います。
5番目のグリッドアイテムを「列のグリッドラインの3番目、行のグリッドライン1〜3行に配置」します。これをCSSにすると
1 2 3 4 | .grid-item-5 { grid-column: 3; grid-row: 1 / 3; } |
になります。縦横に並ぶグリッドラインを基準に「始まりのライン / 終わりのライン」をそれぞれ指定します。
横の範囲には grid-column 、縦の範囲には grid-row のプロパティを使います。また、グリッドトラック1つ分だけ範囲指定するのであれば、「グリッドラインの○番目」の数字を指定できます。
「始まりのライン / 終わりのライン」の書き方だけではなく、こういった書き方も可能です。
1 2 3 4 | .grid-item-5 { grid-column: 3; grid-row: 1 / span2; } |
この場合は「行のグリッドライン1番目からグリッドトラック何個目まで」を範囲指定しています。上のコードと全く意味は同じです。
See the Pen Grid Layout2 – test by necomacustom (@tamayura) on CodePen.27739
少しCSSをいじってありますが、これで完成です。お疲れ様でした！
おまけ – grid-template-areas
グリッドエリアだけが出ていませんね。これは、それぞれ子要素にエリアの名前をつけて、アスキーアートを書いて配置するものです。
grid-template-areas というプロパティを使います。 display: grid; を指定したグリッドコンテナ内に書いていくのですが、子要素となるグリッドアイテムにエリア名をつけることで、グリッドアイテムの配置ができるという、CSSを書くのが苦手な人向け？な機能のようです。
1 2 3 4 5 6 7 8 | .grid-container { display: grid; grid-template-areas: "title title title " "nav main side2 " "nav main side1 " "footer footer footer"; } |
私も作ってみました…大まかな配置をする時には使えそうですが、それぞれのグリッドアイテムに動きをつけたい時はどうすればいいんだろう…
See the Pen Grid Layout-test by necomacustom (@tamayura) on CodePen.27739
このテストはレスポンシブ対応にしています。少しコードを書いてあげると縦並びになります。
1 2 3 4 5 6 7 8 9 10 | @media screen and (max-width: 700px) { body { grid-template-columns: 1fr; grid-template-rows: auto; } header,main,nav,footer,#side1,#side2 { grid-column: 1; grid-row: auto; } } |
グリッドコンテナ部分を grid-template-columns: 1fr; で子要素のグリッドアイテムをコンテンツ幅一杯に、 grid-template-rows: auto; でコンテンツの高さに合わせて表示させます。
また、コンテンツアイテムは列のコンテンツライン1番目、グリッドトラック1つ分の範囲指定するために grid-column: 1; 、コンテンツアイテムのそれぞれ指定されていた高さを解除するために grid-row: auto; を書きます。
参考にしたサイト
実用段階に来た次世代CSSレイアウト「Grid Layout Module」ってなに？ | WPJ
これからのグリッドレイアウト – Grid Layout Moduleの概要 | CodeGrid
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス
CSS Grid Layoutをガッツリ使った所感 | Qiita – clockmaker
私自身初めて学習する内容でしたので、まとまっていないかもしれませんが、新しい技術に触れるきっかけとして読んでいただけたら幸いです。
私的には大枠をグリッドレイアウト、子要素の中のコンテンツをFlexboxで構築するという使い方ができるなと感じています。また、今回の学習で参考にしたサイトはどれも丁寧に解説されていますので、この記事よりも参考になると思います(^^;)
まだまだ新しいブラウザでしか実装できないレイアウトモジュールですが、将来的には浸透していくでしょうし、そのためにも基礎をしっかり身につけておきたいなと考えているねこま（@necomacustom）でした。