Usa auto-fillo auto-fitcome numero di ripetizione della repeat()notazione.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Quando auto-fillviene fornito come numero di ripetizioni, se il contenitore della griglia ha una dimensione definita o una dimensione massima nell'asse pertinente, il numero di ripetizioni è il numero intero positivo più grande possibile che non causa il trabocco della griglia dal contenitore della griglia.
.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>
La griglia ripeterà quante più tracce possibili senza traboccare il suo contenitore.
In questo caso, dato l'esempio sopra (vedi immagine) , solo 5 tracce possono entrare nel contenitore della griglia senza traboccare. Ci sono solo 4 elementi nella nostra griglia, quindi un quinto viene creato come una traccia vuota nello spazio rimanente.
Il resto dello spazio rimanente, traccia # 6, termina la griglia esplicita. Ciò significa che non c'era spazio sufficiente per posizionare un'altra traccia.
auto-fit
La auto-fitparola chiave si comporta come auto-fill, tranne per il fatto che dopo l' algoritmo di posizionamento degli elementi della griglia, tutte le tracce vuote nello spazio rimanente verranno compresse in 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>
La griglia continuerà a ripetere quante più tracce possibile senza traboccare il suo contenitore, ma le tracce vuote verranno ridotte a 0.
Una traccia compressa viene considerata come avente una funzione di dimensionamento della traccia fissa di 0px.
A differenza auto-filldell'esempio dell'immagine, la quinta traccia vuota viene compressa, terminando la griglia esplicita subito dopo il quarto elemento.
auto-fill vs auto-fit
La differenza tra i due è evidente quando minmax()si utilizza la funzione.
Utilizzare minmax(186px, 1fr)per variare gli elementi da 186pxa 186pxpiù una frazione dello spazio rimanente nel contenitore della griglia.
Durante l'utilizzo auto-fill, gli elementi cresceranno quando non c'è spazio per posizionare le tracce vuote.
.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>
Durante l'utilizzo auto-fit, gli elementi cresceranno fino a riempire lo spazio rimanente perché tutte le tracce vuote vengono compresse 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>
Terreno di gioco:
Ispezione di tracce di riempimento automatico
Ispezione delle tracce di adattamento automatico
grid-template-columns: auto auto auto auto;funziona in questo caso? =)