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

February 05, 2023

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

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

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

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

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