[css]gridで色々やった後の後片付け（初期化）

要点だけ。

gridは色々できる

<div>を重ねてどうのこうのしなくても間に2カラムをつけたりとか何でもかんでも組める。

htmlがスッキリするので楽なんだけど、その分cssをみっちり書くことになる。

作って終わりなら良いんだけど、レスポンシブでSP表示にする際に変更するならまだしも全部縦並びにしたい（≒初期化したい）場合が出てくる。

どうすんのって話。

初期化

とにかく仕様をまず読む。

grid-row - CSS: カスケーディングスタイルシート | MDN

grid-row は CSS の一括指定プロパティで、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用することで、グリッド領域の行の先頭と末尾の端を指定します。

developer.mozilla.org

初期値を書いてくれてるから、それで上書きすれば良い。

@media screen and (max-width: 767.98px){
   .grid > div{
        grid-row: auto;
        grid-column: auto;
    }
}

グローバル値とかもあるけど、まあ、あえて書くことも無いと思う。

@media screen and (max-width: 767.98px){
   .grid > div{
        grid-row: unset;
        grid-column: unset;
    }
}

そもそものところ、初期値は物によって違うので全部同じように書けばいいというわけじゃないことは理解しておく。

約束。