🦁
display: gridでレスポンシブデザイン
あまり使ったことがなかったので、メモです。
グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。
（つまり、座標感覚で使えるということ...？）
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
grid-template-columns
→ 列トラックの幅を指定
repeat()
→ grid-template-columns と grid-template-rows で使用可能
→ 中のルールを列(行)で繰り返す
auto-fit
→ 親要素に隙間があったらいい感じに調整して埋める
fr
→ fraction(分数の意味)
→ 空きスペースを何分割するか？
参考
Discussion