CSS grid-auto-flow
La proprietà CSS3 grid-auto-flow controlla il flusso automatico degli elementi
La proprietà grid-auto-flow stabilisce l'ordine e la direzione con cui gli elementi non posizionati esplicitamente vengono distribuiti nella griglia. Con valori come row, column e le varianti dense, si può gestire in modo efficiente il layout automatico.
Sintassi
Significato dei valori principali:
-
row: Gli elementi vengono posizionati per riga (valore predefinito).
-
column: Gli elementi vengono posizionati per colonna.
-
row dense: Gli elementi vengono posizionati per riga, ma con tentativi di riempimento delle celle vuote.
-
column dense: Gli elementi vengono posizionati per colonna, cercando di occupare gli spazi vuoti.
Esempio proprietà: grid-auto-flow
Codice Esempio: grid-auto-flow
.grid-auto-flow-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-flow: column;
gap: 10px;
background-color: #f1f1f1;
padding: 10px;
}.flow-item {
background-color: #e45649;
color: white;
font-size: 18px;
padding: 20px;
text-align: center;
border-radius: 8px;
}
Contenuto Esempio: grid-auto-flow
Esempio di utilizzo di grid-auto-flow
In questo esempio, la proprietà grid-auto-flow è impostata su column, per disporre gli elementi verticalmente in colonne:
CSS e HTML per il flusso automatico verticale:
<style>
.grid-auto-flow-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-flow: column;
gap: 10px;
background-color: #fff;
padding: 10px;
}
.flow-item {
background-color: #e45649;
color: white;
font-size: 18px;
padding: 20px;
text-align: center;
border-radius: 8px;
}
</style>
<div class="grid-auto-flow-container">
<div class="flow-item">1</div>
<div class="flow-item">2</div>
<div class="flow-item">3</div>
<div class="flow-item">4</div>
<div class="flow-item">5</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
