2024年7月アーカイブ

毎回忘れてしまうので見返せるようにメモします。

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;
}

このアーカイブについて

このページには、2024年7月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2024年6月です。

次のアーカイブは2024年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。