auto-fillまたはのいずれかauto-fitをrepeat()表記の繰り返し数として使用します。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
場合はauto-fill繰り返し数として与えられたグリッド・コンテナは、関連する軸で明確なサイズまたは最大サイズを持っている場合は、その後、繰り返し回数は、グリッドがグリッドコンテナをオーバーフローさせていない可能な最大の正の整数です。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
グリッドは、コンテナーをオーバーフローすることなく、可能な限り多くのトラックを繰り返します。
この場合、上記の例（画像を参照）の場合、オーバーフローせずにグリッドコンテナーに収まるのは5トラックのみです。グリッドには4つのアイテムしかないため、残りのスペース内に5番目のアイテムが空のトラックとして作成されます。
残りのスペースの残りのトラック＃6は、明示的なグリッドを終了します。これは、別のトラックを配置するための十分なスペースがなかったことを意味します。
auto-fit
auto-fitキーワードは、同じように動作しauto-fillた後ことを除いて、グリッド項目の配置アルゴリズムの残りのスペース内の任意の空のトラックが崩壊になります0。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
グリッドは、コンテナをオーバーフローすることなく、可能な限り多くのトラックを繰り返しますが、空のトラックはに縮小され0ます。
折りたたまれたトラックは、の固定トラックサイズ変更機能を持つものとして扱われ0pxます。
auto-fill画像の例とは異なり、空の5番目のトラックは折りたたまれ、4番目のアイテムの直後に明示的なグリッドが終了します。
auto-fill 対 auto-fit
minmax()関数を使用すると、2つの違いが顕著になります。
を使用minmax(186px, 1fr)して、アイテムをから186pxに186px加え、グリッドコンテナー内の残りのスペースの一部をプラスします。
を使用する場合auto-fill、空のトラックを配置するスペースがなくなると、アイテムは大きくなります。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
を使用するauto-fitと、すべての空のトラックがに折りたたまれているため、アイテムは残りのスペースを埋めるまで大きくなり0pxます。
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
遊び場：
オートフィルトラックの検査
自動調整トラックの検査
grid-template-columns: auto auto auto auto;この場合動作しますか？=）