こんにちは、ゆんつです。
WEBサイトを作成していて
と思ったことは無いでしょうか。
例えば以下のようなレイアウトがそうです。
見ていただくとわかるように、様々なサイズのボックスに画像が表示されています。
あるものは大きいサイズで、あるものは小さいサイズですが、きちんと大枠の中には納まっているので違和感はありません。
このような表示をする場合。
CSSの「grid」というプロパティを使うと、比較的簡単にこのようなレイアウトを組むことができます。
今日は基本的なgridの使い方について書きたいと思います。
基本
まず、以下のようなHTMLがあるとします。
<div class="container">
<div class="box box_a">A</div>
<div class="box box_b">B</div>
<div class="box box_c">C</div>
<div class="box box_d">D</div>
<div class="box box_e">E</div>
<div class="box box_f">F</div>
</div>ボックスとなる子要素を包み込む親要素には「container」というクラスを付与し、そしてボックスとなる各要素には「box」というクラスを付与しています。
このHTMLを使って、以下のような形を作りたいと思います。
各ボックスの幅は100px
各ボックスの高さは上段が100pxで下段が200pxとします。
まず大前提として、gridを使ってレイアウトする場合には、ボックスを包む親要素のdisplayプロパティの値にgridと設定する必要があります。
.container {
display: grid;
}そして具体的なレイアウトについてですが、ボックスを包み込む親要素であるcontainerクラスにgrid-template-rowsとgrid-template-columnsというプロパティを設定して作成します。
まずgrid-template-rowsですが、このプロパティで各行の高さを設定します。
例えば1行目が100pxで2行目が200pxの場合。
grid-template-rows: 100px 200px;
といった感じで、行ごとに半角スペースで区切って記述します。
次にgrid-template-columnsですが、このプロパティで各列の幅を指定します。
例えば3列すべてが100pxの場合は
grid-template-columns: 100px 100px 100px;
といった感じで、列ごとに半角スペースで区切って幅を指定します。
実際にボックスの親要素であるcontainerに対して、上記のようにCSSを記述すると以下のようになります（※containerの幅もついでに設定しています）。
.container {
max-width: 300px;
margin: 0 auto;
/* gridに必要なプロパティ */
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px 100px 100px;
}行の高さは100pxと200px、各列の幅は100pxの2×3のレイアウトができました（背景色などは別途設定しています）。
See the Pen grid01 by konpure (@yuntu) on CodePen.
ちなみに、grid-template-rowsやgrid-template-columnsの値に使用することができる単位ですが、pxや%に加えてfrという単位も使えます。
frは親要素に対する比率の事で、例えば親要素の幅が300pxある場合にこれを100pxと200pxに分割したい場合は
grid-template-columns: 1fr 2fr;
とすれば100pxと200pxに分割されます。
See the Pen grird02 by konpure (@yuntu) on CodePen.
ボックスを好きな位置に配置する
gridで作成した各ボックスは好きな場所に配置することができます。
それにはボックスを構成する要素のCSSにgrid-rowとgrid-columnというプロパティを設定します。
grid-rowは行を区切るラインで、ラインごとに番号があります。
grid-columnは列を区切るラインで、ラインごとに番号があります。
先ほど作成したレイアウトを例にしてgrid-rowとgrid-columnを説明すると、以下の図のようになります。
このようにgrid-rowとgrid-columnには。ボックスを区切るラインごとに番号があるのです。
この番号を使って、ボックスの位置を指定することで配置を好きなように設定します。
具体的に位置を指定するにはgrid-row及びgrid-columnの値に「開始ライン/終了ライン」という形で指定します。
実際にやってみたほうが解りやすいので例をあげて説明します。
例えばAというボックスとBというボックスを入れ替えたかったとします。
この場合AのボックスをBの位置に移動したいので、Aのボックスを構成する要素にBの位置に対応するgrid-rowとgrid-columnを指定します。
まずBの位置に対応するgrid-rowの開始ラインは1、終了ラインは2なので1/2
そしてBの位置に対応するgrid-columnの開始ラインは2、終了ラインは3なので2/3
よってAのボックスのCSSに対して、以下のように記述します。
.box_a {
background: green;
/* 位置の設定 */
grid-row: 1/2;
grid-column: 2/3;
}これによりAのボックスはBのボックスの位置に移動し、Bは自動的にAの位置に移動しました。
See the Pen grid03 by konpure (@yuntu) on CodePen.
このような感じで各ボックスの位置を設定することができます。
ボックスを結合する
セルの結合のような感じで、あるボックスだけ結合して大きくしたいということもあるかもしれません。
この場合も、先ほどのボックスの配置方法と考え方は変わりません。
例えばCのボックスを上段から下段まで伸ばす場合。
grid-rowは最初のラインから最後のラインまで指定する必要があるので、Cのボックスのgrid-row: 1/3;となり、grid-column: 3/4となります。
このようにCSSを記述すると上段から下段までCのボックスが伸びることになります。
See the Pen grid04 by konpure (@yuntu) on CodePen.
縦方向ではなく横方向に伸ばす場合も考え方は一緒。
Dの幅を通常のボックスの2つ分にしたい場合はDのボックスのgrid-rowは2/3、grid-columnは1/3となります。
See the Pen grid05 by konpure (@yuntu) on CodePen.
間隔の調整にはgap
以下の状態は、それぞれのボックス間隔が全く無いので、ボックスとボックスの間の間隔を空けましょう。
ボックスとボックスの間の間隔の調整には、ボックスを包む親要素に「gap」というプロパティを設定することで実現できます。
たとえば親要素であるcontainerに10pxのgapを設定すると、このような感じになります。
See the Pen grid06 by konpure (@yuntu) on CodePen.
これでボックスとボックスの行間と列間に、それぞれ10pxの間隔があきました。
ちなみにgapは行間も列間も同時に設定されますが、行間だけを設定したい場合はrow-gap、列間だけを設定したい場合はcolumn-gapを使います。
IE11の場合は対策が必要
この「grid」を使ったレイアウトをIE11でも表示する場合。
普通にCSSを記述してしまうと、ChromeやFireFox、Edgeなどでは以下のようなレイアウトになるのが
IE11では以下のように表示されます。
gridが効いていません。
IE11にgridによるレイアウトを対応させたい場合は、各プロパティや値にベンダープレフィックスをつけたりする必要があります。
詳しくはマイクロソフトの解説ページをご覧ください。
上手に使っていきましょう
以上がcssのgridに関する基本的な使い方です。
似たような項目の中で、特に目立たせたい物がある場合。
同じ大きさのボックスをズラッと並べるよりも、gridを使ってボックスの大きさに変化をつけて並べることで、特定のボックスを目立たせることができます。
See the Pen grid07 by konpure (@yuntu) on CodePen.
必要に応じて使っていきたいですね。
