grid-template-columns: repeat

レイアウト・配置

グリッドで自動的に列数を調整する関数です。レスポンシブグリッドの実装に必須です。

構文

Syntax
grid-template-columns: repeat(auto-fit | auto-fill, <track-size>)

コード例

例 1

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
実行結果
auto-fit
250px
min

最小250pxでコンテナ幅に応じて列数を自動調整

例 2

grid-template-columns: repeat(auto-fill, 200px);
実行結果
fill
200px
固定

200px固定幅で可能な限り多くの列を作成

💡 TIPS

auto-fitは余った空間を埋める、auto-fillは空の列も作成する。

関連プロパティ

ブラウザサポート

Chrome 57+, Firefox 52+, Safari 10.1+