gridの使い方メモ

◼️gridを入れ子で使いたいとき
親、子、孫関係になるとき、
→親、子にのみdisplay gridが必要。孫には不要

◼️親で左右に6分割し、子がそのうちの左3ブロック分を3つに分けて使うとき
親に
grid-template-columns: repeat(6, 1fr);
子に
grid-column: 1/4;
grid-template-columns: repeat(3, 1fr);
とする
※1/4=1ライン目から4ライン目まで、という意味。1ブロック目の左のラインが1ライン目なので、1-3ブロックを指定したければ、3ブロック目の右のラインが4ライン目なので、1/3ではなく1/4と書く。)

◼️grid-template-columns: repeat(6, 1fr);で6分割しているとき、
子に
grid-column: 1/4;と書いたら、それは
1,2,3ブロックを使う、という意味になる。
grid-column: 1;と書いたら、それは
1ブロックを使う、という意味に。
grid-column: 1/-1;と書いたら、それは
1ブロック目から最後のブロックまで使う、という意味に。

◼️親、子、孫とあり、親が左右6分割、子も同様に左右6分割、孫がそのうちの左3列を使う、みたいなときは、子にも
display: grid;
grid-column: 1/-1;
grid-template-columns: repeat(6, 1fr);
を書く必要がある。
grid-column: 1/-1;
は、親の6分割全部を使う、
grid-template-columns: repeat(6, 1fr);
は、また6分割する、
という意味。
grid-column-gap: 24px;
とかも、勝手に親から継承はされないので、子にも記述する必要あり。