In CSS Grid, le proprietà grid-template-columns
e grid-template-rows
ti consentono di definire i nomi delle righe e di monitorare le dimensioni delle colonne e delle righe della griglia, rispettivamente. Il supporto dell'interpolazione per queste proprietà consente ai layout della griglia di passare senza problemi da uno stato all'altro, anziché scattare a metà di un'animazione o di una transizione.
Supporto dei browser
Interpolazione dei valori in CSS
In CSS puoi passare senza problemi da un valore all'altro utilizzando la proprietà transition
.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
Il motore di rendering rileverà automaticamente il tipo del valore della proprietà scelta come target e utilizzerà queste informazioni per passare senza problemi al nuovo valore.
Ad esempio:
- Stai eseguendo la transizione di
opacity
da0
a1
? Si tratta di un'interpolazione numerica. - Stai eseguendo la transizione di
background-color
dawhite
ablack
? Effetto sfumato tra i colori di origine e di destinazione. - Transizione di
width
? Interpola numericamente, convertendo le unità lungo il percorso, se necessario.
Lo stesso vale per le animazioni CSS, in cui il browser eseguirà l'interpolazione dei valori tra i fotogrammi chiave.
Anima grid-template-columns
e grid-template-rows
I layout della griglia possono anche passare senza problemi da uno stato all'altro, anziché scattare a metà di un'animazione o di una transizione.
Nella demo seguente una griglia mostra diversi avatar. Per risparmiare spazio, gli avatar vengono disposti uno sopra l'altro limitando la larghezza di ogni colonna utilizzando grid-template-columns
. Al passaggio del mouse, a ogni colonna viene assegnato più spazio.
.avatars {
display: grid;
gap: 0.35em;
grid-auto-flow: column;
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
}
.avatars:hover {
grid-template-columns: repeat(4, 4em);
}
Con la proprietà transition
impostata, la griglia esegue un'interpolazione uniforme tra i valori.
L'effetto si applica anche alle animazioni che modificano i valori grid-template-columns
o grid-template-rows
.