CSSのgapをgrid layoutへ使うときは子要素のmarginと役割を分ける

CSS Gridでカードや画像を並べるとき、要素どうしの間隔はcontainer側で決め、各カード固有の余白は子要素側で決めます。Gridの列と行の間隔を作るために子要素へ同じmarginを付け続けると、端の余白、折り返した行、画面幅を替えたときの計算が混ざります。grid-gap、grid-row-gap、grid-column-gapを使っている部分は、その値が何と何の間を空けるのかを確かめたうえで、gap、row-gap、column-gapへ整理します。

Chromium Blogは3月21日、Chrome 66 BetaでGridのgutter propertyからgrid prefixを外す変更を案内しました。grid-gapはgap、grid-row-gapはrow-gap、grid-column-gapはcolumn-gapになります。以前のpropertyは新しい名称のaliasとして残り、初期値はどれもnormalです。Chrome 66 Betaでの変更であるため、制作中のsiteでは対応browserを確かめ、名称だけを一括置換して表示確認を省かないようにします。

gridの間隔とカードの余白は別の仕事をする

gapは、grid containerが子要素の間へ作る間隔である。二列の一覧なら、左のカードと右のカードの間、上の行と下の行の間をまとめて決められる。列の間だけを変えたい場合はcolumn-gap、行の間だけを変えたい場合はrow-gapを使う。containerが一覧の見た目を管理するので、カードの数が増えても、最後のカードだけに余白を消す指定を足さずに済む。

一方、子要素のmarginは、そのカード自身と周囲の関係に使う。たとえばカード内の見出しと本文の間、カードの外側とsection見出しの間、広告枠だけに必要な上の余白は、grid全体の間隔とは別に考える。全てのカードへmargin-rightとmargin-bottomを付けて列と行の間隔を作ると、右端にも余白が残る。containerの幅から余白を引いたwidthを計算している場合は、画面幅が変わったときに列が収まらないこともある。

次のように、誰が余白を持つかを先に決める。

この分け方をしておけば、一覧の間隔を広げる作業と、カード内の文字を読みやすくする作業を別に変更できる。gapを導入したからmarginを全て消すのではない。目的が重なっているmarginだけを、containerの設定へ移す。

一覧を一つ選び、端と折り返しを先に見る

既存のstylesheetを検索してgrid-gapを見つけたら、先に使われている画面を開く。CSSだけを見てproperty名を替えると、そのmarginが列の間隔のためなのか、cardの外側を空けるためなのか分からないことがある。商品一覧、news一覧、portfolio一覧のように、二列以上で表示する部分を一つ選び、PCとmobileで確認する。

見る場所は、中央のカードだけではない。左端と右端に不自然な余白がないか、最後の行に一枚だけ残ったときの位置が崩れないか、画面幅が狭くなって一列になったときに行の間隔が残るかを見ます。たとえば二列のcardにmargin-rightを付けていると、右端のcardにも余白が付き、containerの内側で列幅がそろわなくなる。column-gapへ移せば、列と列の間だけを空けられる。

ただし、古いbrowser向けのlayoutを同じstylesheetで支えている場合は、propertyを替えただけで同じ表示になるとは決めません。対応させるbrowserを確認し、必要なら既存の指定を残す範囲と、新しい指定を使う範囲を制作側と決めます。新しいproperty名が読みやすいことと、公開中の全browserで同じlayoutになることは別の確認です。

gapへ替える前に幅の計算をほどく

marginで間隔を作っているlayoutには、widthの計算へ余白を含めているものがある。たとえば二列を半分ずつにし、各cardに左右のmarginを付けていると、見かけの幅はwidthだけでは分からない。ここへgapを足すと、既存のmarginと新しい間隔が二重になり、containerからはみ出す。

変更前に、containerのwidth、列数、子要素のwidth、子要素のmarginを同じ箇所で確認します。二列の間を空ける役割だけなら、子要素の左右marginを外し、containerへcolumn-gapを置きます。行の間だけならmargin-bottomを外してrow-gapを置きます。cardの背景、border、影と離したい余白が残るなら、そのmarginは消さず、何のために残すかをcommentか設計メモへ残します。

仮に、写真とタイトルを並べた制作実績の一覧で、各cardの右に20px、下に30pxのmarginがあるとします。右の20pxが列間のためだけならcolumn-gap: 20pxへ移せます。下の30pxが次の行との間隔ならrow-gap: 30pxへ移せます。しかし、一覧の下だけに30pxを作るためのmargin-bottomまで同時に消せば、次のsectionとの距離が変わる。外側の余白と一覧内部の余白は、同じ数字でも役割が違います。

property名より公開画面の規則を先に残す

grid-gapからgapへ書き換える目的は、property名を新しくすることではありません。列と行の間隔をcontainerで読み取れる形にし、styleの責任を分けることです。作業を頼む場合は「grid-gapを全てgapへ替える」とだけ渡さず、対象のURL、列数、端に必要な余白、mobileで一列になるときの間隔、対応browserを渡します。

変更後は、PCで複数列を見てからmobileで一列を見ます。カードの数を変えられるなら、一枚、二枚、三枚以上でも確認します。画像の読み込みが遅れたとき、文章が長くなったときにも、cardが重ならず、linkを押せるかを確かめます。CSSのpropertyは短くても、一覧の表示は本文、画像、画面幅、browserの組合せで変わります。

Gridの余白を直すときは、最初にcontainerが作る間隔と子要素が持つ余白を分けます。次に端と折り返しを見ます。最後にPCとmobileで公開画面を確認します。この順序なら、新しいproperty名へ替えても、余白を二重にしたり、必要な外側の間隔まで消したりしません。