grid-templateでページレイアウトが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 04日目）

最近便利なCSSおれおれAdvent Calendar 2023 – 04 日目

CSS グリッド、便利ですよね。grid-template だと人類にもわかりやすい書き方でレイアウトを組むことができます。

使い方

デモ：https://codepen.io/ginpei/pen/QWYJvdp

.frame {
  display: grid;
  grid-template:
    "header  header header" 32px
    "toolbar main   aside"  auto
    "toolbar footer footer" 16px
    / 32px   auto   200px;
}

<div class="frame">
  <div style="grid-area:header"></div>
  <div style="grid-area:main"></div>
  <div style="grid-area:aside"></div>
  <div style="grid-area:toolbar"></div>
  <div style="grid-area:footer"></div>
</div>

枠側の grid-template でグリッドを定義して、子側の grid-area で配置します。

grid-template の文法は言葉で説明するの難しいけどなんとなく伝わるでしょうか。

文字列部分 "…" にはグリッドのテンプレート領域の名前を書きます。好きに命名してください。今回の例だと 3×3 のグリッドになっていて、header、toolbar、main、aside、footer という名前の領域がありますね。その後ろは 1 行の高さです。

/ で区切って、最後は各列の幅です。

領域が定義できたら、その子要素で grid-area:main のように配置先を指定します。

その他

領域の指定どうする問題

あんまり HTML に style 属性書きたくないなという気持ちはある一方で、配置専用にクラス名用意するのもなんだかなといも考えてしまいます。わかりますか、この揺れる想い。

別にスタイル定義の方で頑張ってもいいんですが、というかその方がまあ綺麗は綺麗なんですが、うーん。クラスじゃなくて data 属性でとかそういう話でもないです。

コンポーネントとして公開するという場合なら、配布用にクラス名を用意しておく方が良いかもしれません。

使うときは領域名に引用符は不要

grid-area:"main" ← エラー

grid-area:main ← 正解

定義する方 (grid-template) では必須。

おしまい

デザイナーさんの作るグリッドは repeat() と併用するのが多いかなと想像するんですが、自分はデザインわからないので今回みたいに名前つけてサイズ指定で作ってます。