毎回忘れてしまうので見返せるようにメモします。
grid 内に grid を入れ子にしたとき、通常では子 grid は親 grid のグリッドラインに揃いませんが、subgrid を使うことで揃えることができます。
・grid の中に grid が入れ子になっている
・子 grid が親 grid のグリッドセルを複数個つかっている
上記のようなとき、子gridの grid-template-columns や grid-template-rows に "subgrid" を指定することで実装できます。
（例）
// 親
.parent {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
}
// 子
.child {
grid-columns: span 2; // 親 grid のグリッドセル横2つ分のサイズ
display: grid;
grid-template-columns: subgrid;
}
コメントする