Grid Layoutとは？これからのCSSはグリッドも学んで、自由自在にカスタマイズしていきましょう！
はじめに
CSS Grid Layout（グリッドレイアウト）は、2次元のレイアウトをCSSにもたらす、CSSの新しい機能であり概念のことです。
Grid Layoutを理解することで、CSSのスタイルをより縦横無尽にカスタマイズしていくことが可能になります。
それでは、Grid Layoutについて基本的な所から説明していきます。
Grid Layoutとは？
グリッドとは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。
例えて言うと、碁盤の目のように、縦と横の何番目かなどで要素を特定できる規則のことを指します。Excelなどをイメージしてもらうとわかりやすいかもしれません。
格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。
それまでも大変便利とされていたFlexBoxと組み合わせて使うことで、更に柔軟かつ創造的なレイアウトをもたらしてくれます。
Grid Layout と Flex Box の違い
Grid Layoutが出てくるまでは、CSSで便利で革新的な概念と言えばFlexBoxでした。
そこに更にGrid Layoutが参入したことにより、より複雑かつ多彩な動きを要素にもたらしてくれるようになりました。
それでは、このGrid LayoutとFlexBox、その2つの違いはどのような所にあるのでしょうか。
便利なのはわかるけど、どのように使い分けるのか？と言ったことも説明します。
両者の違いは、要素の配置の次元にあります。
CSS Grid Layout
2次元(縦and横)
縦横自由に配置
CSS FlexBox
1次元(縦or横)
折返しはするけど一方向
GridLayoutとFlexBoxの一番の違いは、2次元か1次元か、という部分になります。
これまでのFlexBoxでは1次元ずつ表現していくしかなかったレイアウトも、GridLayoutを用いての2次元レイアウトなら簡単に表現できたりします。
両者にはそれぞれ使い所があり、1次元に要素を配置するのはFlexboxが適しており、2次元に要素を配置するのはGridLayoutが適しているとも言えます。
基本的にGridLayoutはFlexBoxより後発(より最近リリースされている)である分、FlexBoxでできることはGridLayoutで実現できると言え、FlexBoxで実現できなかったことをGridLayoutで実現できる所にその良さがあります。
そしてこのGrid LayoutとFlexBoxは、どちらか一つを採用すると決めるのではなく、互いに必要に応じて利用していくのが良いとされています。
必ずしもどっちかにこだわる必要はありません。あくまでGridLayoutもFlexBoxも作りたいレイアウトを実現するための手段なので、個人の必要に応じて採用していけばいいと存じます。
例えば、全体のレイアウトの構成はGrid Layout、中身の一つ一つのフォームはFlexBox、といったように適材適所で使い分けていくのが最適と言えます。
Grid Layoutのおすすめポイント
Grid Layoutは使うのが難しいというイメージを持っている人が多いかもしれません。それはどこか複雑なレイアウトを実装する場合に使われるイメージがあるからではないでしょうか。
しかし、シンプルなレイアウトであればfloat: leftやdisplay: flexよりもdisplay: gridのほうが簡単に扱うことが可能です。
つまりGridLayoutを採用することで、従来では大変や不可能とされていたレイアウトを、より思い通りにカスタマイズすることが可能になる訳です。
Grid Layoutの構成要素
・コンテナ
・アイテム
・ライン
・トラック
・セル
・エリア
Grid Layoutの使用方法
グリッドシステムを扱うには、グリッドコンテナーにグリッドを作成することから始まります。
<div class=“grid_wrap”>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.grid_wrap {
display: grid;
}
これからグリッドレイアウトを扱いたい箱にdisplay: grid; を指定することで、その箱全体にグリッドの恩恵を受けることができるようになります。この辺りはtableやFlexBoxと似ているかと存じます。
Grid Layoutの使用例
Grid Layoutの基本的なレイアウトを用いて、下の画像のような簡単なフォームを作成します。
以下、HTMLとCSSです。
<form class="sample_form">
<label for="sample_name">Name </label>
<input type="text" name="sample_name" id="sample_name" required>
<label for="sample_email">Email </label>
<input type="email" name="sample_email" id="sample_email">
<label for="sample_comments">Comments</label>
<textarea name="sample_comments" id="sample_comments" maxlength="1000"></textarea>
<button>Submit</button>
</form>
.sample_form {
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 10px;
background: #eee;
padding: 20px;
}
.sample_form > label {
grid-column: 1/2;
}
.sample_form > input,
.sample_form > textarea,
.sample_form > button {
grid-column: 2/3;
}
まず、formタグ全体にグリッドを適用します。
次にgrid-template-columnsはカラム数と幅を決めます。最初の200pxは左カラムの幅を200pxと指定して、1frは残り全ての幅を右に当てるという意味で使っています。1frという単位については後述します。
続いて、grid-columnを使って縦のラインの配置を作っていきますが、原則としてラベルは左、テキストボックスとボタンは右に配置したいので、grid-columnの指定をしていきます。grid-columnの指定はマスの目で考えると理解しやすいです。
上記の画像はGrid Layoutの列(column)と行(row)を管理するGridコンテナー内での番号の考え方を図で表したものです。画像にあるように、Gridコンテナー内のアイテムには自ずと番号が割り振られています。その番号を用いて、アイテムを配置したい位置に指定してあげます。
columnは縦のライン、rowは横のラインを管理します。
今回のフォームの例では、ラベルは左側なので1と2の間、テキストボックスは右側なので2と3の間、という考え方になります。
項目ごとの間を空けるためには、formタグにgrid-gapを指定すれば実現できます。grid-gapはcssのmarginの役割を担ってくれます。
上記の要領でGrid Layoutのルールに沿ってスタイルを当てることで、簡単にフォームのレイアウトを完成させることができます。
Grid Layoutを使う際の大事なポイント・注意点
fr という単位
frは、親要素の幅に合わせたグリッドの幅に自動的に調整することができる単位のことです。Grid Layoutに対して使用する単位であり、CSSのスタイルレイアウトの方法として新しく追加された概念でもあります。
frはfractionの略で「分数」という意味で、グリッドコンテナー内の利用可能な空間の分数(a fraction)を表します。
例えば、3列の中身の幅を1:2:1にしたい場合は「1fr 2fr 1fr」と指定します。
幅600pxでgap: 20px;の場合は(600 – 20 * 2) / 4 = 140なので、1frは140px、2frは280pxとなります。
.wrap-grid-fr {
display: grid;
gap: 20px;
grid-template-columns: 1fr 2fr 1fr;
max-width: 600px;
}
さいごに
グリッドレイアウト、いかがでしょうか？
触りの部分しか説明できていませんが、基礎的な部分を理解すれば、後は自由にカスタマイズしていけると思います。
一度に全部覚えるのは非常に大変なので、自分の実現したいスタイルに必要なものから手をつけてみるといいのではないかと思います。
今までFlexBoxを存分に使いこなしてきた人も、これからCSSを学んでいく人も、また一つ新しい概念としてGridLayoutを学習してみるのはいかがでしょうか。
是非グリッドの良さや便利さを味わってほしいと存じます。
きっとより楽しいCSSライフがあなたを待っていることでしょう。
