CSS Grid の研究

3 つに分類する

• A: container の分割をカスタマイズ（Wix Studio）
• B: container の分割はほぼ固定で、cell の配置が自由自在（Squarespace）
• C: container の分割はほぼ固定で、cell の配置は積み上げ（Framer）

個人的な使い分け

コーディングするなら A 。
コーディングで B はメンテ不可能になりそうなのでやったことない。
C で書くより慣れている flex にする。

7 年前に作られた CSS Grid Layout Generator
https://github.com/mizchi-sandbox/grid-generator
https://github.com/miyaoka/grid-generator

GUI で直感的に配置できるかもしれない B を実験。

grid-col-end にマイナスの数値をいれておけば、container の cols が変化したときはみ出さない。

この記事 grid responsive について整理されている
https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/

実装したコード
https://github.com/akifo/akiho.dev--grid

span は、はみ出てしまうので、container の cols が変化する場合使いにくい。
レスポンシブのことを考えると、A か C が良い気がする。
B はレスポンシブで崩壊しそう。
崩壊しない方法はあるのかもしれない。