【CSS】grid layout -その３- auto-fillとauto-fit

programming

グリッドレイアウトのその３。

repeat()とminmax()、auito-fit、auto-fillの使用例。

grid-template-columns:repeat(auto-fill, minmax(50px, 1fr));とすると、幅50px~1frのセルが作られる。グリッドコンテナの幅が拡大するにつれ、余白に新たな空のセルが追加される。コンテナ幅が小さくなると、アイテムは自動的に折り返される。

grid-template-columns:repeat(auto-fit, minmax(50px, 1fr));では、グリッドコンテナの幅に合わせてアイテム幅も拡大する。折り返されたときの空きスペースは、余白になる（セルは追加されない）。

auto-fill-auto-fit

auto-fill-auto-fit

grid-template-columns:repeat(auto-fill, minmax(50px, 1fr));

grid-template-columns:repeat(auto-fit, minmax(50px, 1fr));

 

簡単になりますが、以上です。

参考記事

Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit

横幅が広がったときの挙動が変わる！CSS Gridの「auto-fill」と「auto-fit」の違い

【CSS】auto-fit・auto-fillの使い方、トラックの幅の指定を繰り返す!

お薦め