CSS Gridは二次元の配置が必要な部分に使い既存layoutの置換と分ける

CSS Gridは、pageの中で行と列を同時に決めるためのlayoutです。横に並べるだけなら、既存のblock layoutやFlexboxで足りる場合があります。けれども、見出し、画像、説明、buttonを複数の列と行にまたがってそろえたい部分では、CSS Gridを使うとHTMLの順序と見た目の配置を分けて考えやすくなります。

Chrome 57ではdisplay: gridのsupportが加わりました。Chrome 57の開発者向け発表は、CSS Gridを二次元のgrid-based layout systemとして紹介しています。ただし、新しい指定が使えるようになったことと、既存siteのlayoutを一度に置き換えることは別です。最初に、二次元の配置が必要な一部分を選び、読む順番、狭い画面での見え方、対応するbrowserを確認します。

CSS Gridが必要なのは行と列の関係を同時に決めるとき

Flexboxは、横方向または縦方向へ要素を並べる場面で扱いやすいlayoutです。CSS Gridは、それに代わる万能の指定ではありません。行と列の両方に意味があり、ある要素だけを二列分に広げる、見出しと説明を列でそろえる、といった関係を持つ部分に向きます。

たとえば、サービスを三つ並べる案内を考えます。各サービスに画像、名称、短い説明、詳細を見るlinkがあり、通常は同じ順序で繰り返します。このような一覧は、画面幅に合わせて列数を変え、各cardの中の順序を保てばよいでしょう。一方で、特集記事の先頭に大きな写真、本文の案内、申込みbutton、補足情報を置き、写真だけを二行にまたがらせたい場合は、行と列を一緒に決める方が分かりやすくなります。

CSS Gridを使うかは、指定の新しさで決めません。利用者が情報を読み、必要なら連絡や申込みへ進めるかで決めます。三列の見栄えを作るためにHTMLの順序をばらばらにすると、狭い画面やCSSが十分に使えない環境で意味が伝わりにくくなります。最初にHTMLを上から読んだときの順序を決め、その順序を保ったままgridへ配置します。

containerが持つ列とitemが持つ場所を分ける

CSS Gridでは、親要素をgrid containerにし、子要素をgrid itemとして配置します。親側で何列にするか、列の幅と間隔を決めます。子側でどの列と行へ置くかを決めます。この役割を混ぜると、変更したい場所が増え、後からcardを一つ加えたときにどの指定が効いているか分かりにくくなります。

次は、三つの案内を広い画面では三列、狭い画面では一列にする説明用の例です。HTMLでは、一つ目から三つ目までを読む順に並べます。CSSは、containerだけに列数を持たせます。

<section class="service-list">
  <article class="service-card">...</article>
  <article class="service-card">...</article>
  <article class="service-card">...</article>
</section>

.service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .service-list {
    grid-template-columns: 1fr;
  }
}

この例で大切なのは、repeat(3, 1fr)そのものではありません。三つのcardを一列にしても、見出し、説明、linkの順が変わらないことです。phoneでは一列、desktopでは三列という見た目の差は、HTMLの読む順を変える理由になりません。画像を装飾として使う場合と、内容を伝える画像として使う場合も分け、後者には何を示す画像かが分かる代替textを用意します。

gapはitem間の余白をcontainerでまとめて決められます。各cardへ個別のmarginを足して間隔を作る方法もありますが、列数や順序を変えたときに端だけ余白が残りやすくなります。どちらが正しいかではなく、余白の責任をcontainerに持たせるか、itemごとの役割に持たせるかを決めます。共通の間隔ならcontainerにまとめる方が、変更箇所を探しやすくなります。

見た目の配置で読む順番を壊さない

CSS Gridでは、itemを任意の列や行へ配置できます。大きな写真を二列に広げたり、補足情報を右側へ置いたりできます。しかし、見た目の位置だけを優先すると、keyboardで移動する順序やCSSを使わない状態で読む順序が、画面の説明と食い違います。

説明用の仮例として、イベント案内に「日時」「会場」「申込み」を置く場合を考えます。画面を広く使えるときは、日時と会場を横に並べ、申込みbuttonを右下に置きたくなるかもしれません。それでもHTMLでは、案内の見出し、日時、会場、申込み条件、buttonの順に置きます。利用者が知る必要のある条件より先にbuttonへ着かないようにするためです。

Grid areaへ名前を付ける方法は、見た目の配置を読む人へ伝える助けになります。grid-template-areasを使うなら、名前を単なる位置の略号にせず、image、summary、contactのように内容を表すものにします。ただし、名前を付けてもHTMLの順序やlink文言が自動で良くなるわけではありません。CSSの設計と、公開する案内の設計を混同しないことが必要です。

特にformでは、見出し、label、入力欄、error message、送信buttonの順が重要です。gridを使って二列に見せるときも、labelとinputの対応を外さず、狭い画面では一列へ戻したときに読みやすいことを確認します。formを見栄えよく並べても、必要な入力が分からない、errorがどの欄に関係するか分からないなら、問い合わせを受ける目的には寄与しません。

既存layoutの全面置換と小さな導入を分ける

W3CのCSS Grid Layout Module Level 1は、CSS Gridを二次元のgrid-based layout systemとして定義しています。この文書はCandidate Recommendationであり、仕様はなお見直される段階にあります。新しいlayoutを使うときは、既存のfloatやFlexboxを全て古いものとして扱わず、対象pageの目的と利用者の環境を確認して導入範囲を決めます。

まず、変更しても事業への影響を抑えやすい一部分を選びます。たとえば、更新頻度の低い会社案内のcard一覧や、特集pageの案内部分です。top page全体、header、問い合わせformを同時に組み替えると、表示が崩れたときにgridの指定、既存CSS、themeのtemplate、JavaScriptのどれを確かめるべきか分かりません。導入する部分を一つに絞れば、確認するURLも絞れます。

次に、利用者が使うbrowserと画面幅を確認します。Chrome 57ではdisplay: gridが使えますが、他のbrowserで同じように表示できるかは、公開するsiteの対象環境ごとに確認が必要です。CSSの新しい指定を読めないbrowserでは、後から書いた指定を無視することがあります。既存のblock layoutを先に書き、その後にgridの指定を追加すれば、gridを使えない環境で内容が読める形を残せます。

.service-list {
  margin: 0;
}

@supports (display: grid) {
  .service-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

この書き方だけで全てのbrowser差を解決するわけではありません。使う指定、対象browser、既存CSSの組み合わせで結果は変わります。重要なのは、gridが使えないときにも本文とlinkを読めるようにすることです。見栄えの差と、案内や入力ができない問題を同じ重さで扱いません。

確認するときは、広い画面と狭い画面を開き、列数だけを見ません。長い見出しが重なっていないか、画像が切れて内容が分からなくなっていないか、linkの押せる範囲が狭くなっていないかを見ます。管理画面から文章や画像を差し替えるsiteなら、短い仮の文だけでなく、実際に入り得る長さの見出しと説明で確認します。制作時の見本だけ整っていても、公開後に更新できなければ運用には向きません。

最初の一手は、二次元の配置が本当に必要な一部分を一つ選び、HTMLの読む順序を決めることです。その部分だけにCSS Gridを使い、広い画面、狭い画面、対象browserで内容とlinkを確認します。新しいlayoutを入れることではなく、更新後も利用者へ必要な案内を伝え続けられることを基準にします。