「display: grid」 は「grid-template-columns」とともに

当ブログではありませんが、2カラムの年表のようなレイアウトでページを作りたいということで。
既存でコンテンツがありましたし、すでにdlで組んであったこともあり、gridに挑戦してみました。

グリッドレイアウトとは何かに関しては、付録だと思いますので、最後に書いておきます。

「grid」の使い方

基本概念として、参考リンクにまとまっています。
MDN Web Docs です。

コンテナを自動で並べることも、指定位置に強制的に配置することもできそうということが分かりました。
今回は2カラムですし規則的なものだったので自動配置にしていますが、かなり細かいことができるのですね。重なりまでいくと管理が大変そうですが。。
行や列を跨ぐ設定は普通に使います。

コードはこの投稿用にデフォルメしています。

親要素に指定

まずはグリッドにする全体枠を決めて、グループ要素を定義することになります。
今回はdl、dt、ddとしてすでに組んでいたので、親要素はdlです。
通常はすべてdivでよいでしょう。

親要素の配下に子要素を設けて、そいつらをグリッドに配置していきます。
が、今回はもろもろの設定をタグ名で指定したので、さらに上位の要素に固有のクラス名をつけておくことにしました。
上位要素のクラス配下にある特定タグへの指定という思想です。

• 親要素： dl
• 子要素： dt、dd

配置方法もいっしょに指定

子要素をどう配置するか、全体像は親要素に決めておきます。
つまり、グリッドの線をいくつにするかです。

今回はカラム分けだけフレームにして指定しました。

細かい設定も可能で、列の開始位置と終了位置、行の開始位置と終了位置をそれぞれ指定すれば、セル結合のような指定も可能です。
グリッド線はbase 1で、4つの位置の指定は線の番号です。
範囲は矩形になります。

そのため、列数がどうなるかはあらかじめ指定が必要です。
HTMLなので暗黙設定にしてしまうという方法もありますが。。

2列のテーブルを作ってみる

今回作成した年表です。
沿革ともいいます。
もちろん内容はデフォルメしております。

情報が整理されていますし、見た目を細かく調整するつもりもなかったので、かなりざっくりとした指定です。

ここでは横幅を4列に切って、1列目を見出しに割り当て、2～4列目を説明に割り当てています。
画面幅が変われば、それに伴って全体の幅が小さくなります。比率はそのままです。
2カラムなので問題ないという判断です。

完成イメージ

もともと説明リストにしていたものを2カラムのテーブルのようにしたので。

書いたコード

クラス名を付けたくらいです。

HTML

<div class="wnkhs37052-grid2">
<dl>
<dt>2016年</dt>
<dd>ブログ運営スタート</dd>
<dt>2021年</dt>
<dd>5周年</dd>
<dt>2026年</dt>
<dd>10周年</dd>
</dl>
</div>

divはクラス名を付けるためだけの設定です。

CSS

.wnkhs37052-grid2 dl{
    display: grid;
    grid-template-columns: 1fr 3fr;
}
.wnkhs37052-grid2 dt {
    background-color: #eeeeee;
    margin: 0.5em;
    padding: 0.5em;
}
.wnkhs37052-grid2 dd {
    margin: 1em;
]

「grid-template-columns」に1:3でフレームを指定しました。
結果、4フレームです。
説明リストは規則的に並べましたので、結果的に用語と説明が年と内容のかたちで並びます。

グリッドレイアウト とは

画面を方眼紙に見立てて、マス目に沿って要素を配置していこうという話です。

せっかくなのでCopilotに聞いてみました。
回答（の抜粋）は以下のとおりです。

グリッドレイアウトは、テキストや画像などの各要素を格子状（グリッド）に配置するレイアウト手法のことを指します。別名でグリッドデザインやグリッドシステムとも呼ばれています。

Copilotの回答

CSSを使うとWebページでも実現できます。
詳しい指定方法や具体例はインターネットに転がっています。
うまく活用して、かっこいい見た目を作れそうです。
テーブルはレイアウトに使わないので、グリッドを使えばよいのだと思います。