Use auto-fillou auto-fitcomo o número de repetição da repeat()notação.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Quando auto-fillé dado como o número de repetição, se o contêiner de grade tem um tamanho definido ou tamanho máximo no eixo relevante, então o número de repetições é o maior inteiro positivo possível que não faz com que a grade transborde de seu contêiner de grade.
.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>
A grade irá repetir tantas trilhas quanto possível sem estourar seu contêiner.
Neste caso, dado o exemplo acima (veja a imagem) , apenas 5 trilhas podem caber no contêiner da grade sem transbordar. Existem apenas 4 itens em nossa grade, então um quinto é criado como uma trilha vazia dentro do espaço restante.
O resto do espaço restante, faixa # 6, termina a grade explícita. Isso significa que não havia espaço suficiente para colocar outra faixa.
auto-fit
A auto-fitpalavra-chave se comporta da mesma forma que auto-fill, exceto que após o algoritmo de posicionamento do item da grade, quaisquer trilhas vazias dentro do espaço restante serão reduzidas para 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>
A grade ainda irá repetir tantas trilhas quanto possível sem estourar seu contêiner, mas as trilhas vazias serão recolhidas 0.
Uma pista colapsada é tratada como tendo uma função fixa de dimensionamento de pista 0px.
Ao contrário do auto-fillexemplo de imagem, a quinta faixa vazia é recolhida, terminando a grade explícita logo após o 4º item.
auto-fill vs auto-fit
A diferença entre os dois é perceptível quando o minmax() função é usada.
Use minmax(186px, 1fr)para variar os itens de186px a 186pxmais uma fração do espaço restante no contêiner da grade.
Ao usar auto-fill, os itens vão crescer, uma vez que não há espaço para colocar faixas vazias.
.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>
Ao usar auto-fit, os itens crescerão para preencher o espaço restante, pois todas as trilhas vazias serão reduzidas 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>
Parque infantil:
Inspecionando faixas de preenchimento automático
Inspecionando faixas de ajuste automático
grid-template-columns: auto auto auto auto;funciona neste caso? =)