🦁

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(分数の意味)
→ 空きスペースを何分割するか?

参考
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Discussion