グリッドという単語から連想するもので世代は特定できない。しかし趣向は判明する。

要件：cssグリッドを使ってみよう。

「ここに使えないかなぁ？」

　コロナの影響による休職期間中、レベルアップのため過去に構築したサイトをスリムに作り直すということにチャレンジする中で、Flexboxレイアウトしている箇所を今まで実務で使うことのなかった「CSSグリッド」を使ってやってみようと、先人の英知を検索してみました。

大まかに
親要素
・宣言
　「グリッドやろうぜ！」
　「Access flash！」
・縦横の区画分け
　「横要素を3等分に分ける」
　「1列に300px幅で4つ並べる」
　「縦は200pxと300pxに分ける」
・子要素の上下左右の間隔を設定
　「上下は5％、左右は２rem感覚をあける」

子要素
・親要素で定義されたグリッドのどこに配置するか。
・配置にあたってどの範囲でグリッドをくっつけるか。

面白いと思ったのが、グリッドの配置/結合に「グリッド自体」を指定するのではなく、グリッドを構成する上下左右の辺を指定する点です。

配置：グリッドの上辺/左辺を指定
　グリッドを結合する範囲：配置したグリッドの上(左)辺と結合させたいグリッドの下(右)辺を指定

例えば親要素で横×縦：3×5に区切った場合、横は4本、縦は6本の辺で構成されます。
ここに子要素Aを横２/縦３のグリッドに配置する場合、以下のような指定の仕方をします。
　横：左から２番目の辺
　縦：上から3番目の辺

更に、ここから縦４のグリッドと結合する場合も指定するのは辺になります。
　横：左から２番目の辺
　縦：上から3番目から、5番目の辺

指定するのは縦4を構成する下辺です。
縦4の上辺である4番目の辺を指定すると、これは縦3の下辺を指定しているとみなされるため、縦４は無視されます。

横方向も同じ要領で、位置指定は左辺、範囲指定は結合したいグリッドの右辺になります。

とりあえず表層だけさわった感想。
「20年くらい前に似たようなことしてた気がする？！」

昔々、まだDWがアドビじゃなくてマクロメディアな時代に趣味でサイト作成やってた頃のお話。
あの頃はHTML記述ではなく、ワンクリックでパーツを配置していく感じのソフトを使ってたんですが、構築の際にtableを細かく区切って、そこに画像なんか置いて画面レイアウトをしていたことがったんデスワ。
今なら「ぜったいやるなよ？」と言われちゃう手法です。

その「table要素の邪道使用撲滅運動」を経験した人々が「それでもこの方法でやりたいんじゃよ！」の思いが結実したのがこれなんだと確信しました………うそです。

そんなことを思い出しながら「合法的にtable要素ライクにレイアウトを行う」ためのCSSと感じた次第です。

「Flexbox」との使い分けですが、今回はかなり簡単なレイアウトに対してやってみたこともあって、CSSグリッド使うことによるメリットはほぼありませんでした。構造的に利点はあるのだと思いますが、どのような場面でそれが活かせるのか、ちょっと想像できていません。

逆にcssグリッドでお手軽にできる、面白い表現手法とか見つけられたらと思います。その辺用研究ですね。