La funzione repeat nei CSS Grid
Se hai diverse colonne
a cui vengono assegnate le stesse dimensioni,
puoi semplificare la scrittura utilizzando la
funzione repeat.
Il primo parametro di questa funzione specifica
il numero di colonne, e il secondo - la loro larghezza.
Diamo un'occhiata ad alcuni esempi
per vedere come funziona.
Esempio
Supponiamo di avere tre colonne della stessa dimensione:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Semplifichiamo la scrittura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Esempio
Supponiamo di avere tre colonne della stessa dimensione, e una quarta di dimensione diversa:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Semplifichiamo la scrittura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Esempio
Supponiamo che le prime tre colonne siano di una dimensione, e le seconde tre colonne di un'altra dimensione:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Semplifichiamo la scrittura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Esempio
Supponiamo di avere le prime tre colonne di una dimensione, poi un'altra colonna, e poi altre tre colonne di dimensione diversa:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Semplifichiamo la scrittura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Esempio
La semplificazione funziona per qualsiasi unità di misura. Supponiamo, ad esempio, di avere tre colonne in pixel:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Semplifichiamo la scrittura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Compiti pratici
Crea 4 colonne della stessa
dimensione utilizzando repeat.
Crea 4 colonne di dimensione 100px,
e altre 3 colonne di dimensione 2fr.
Crea 2 colonne di dimensione 100px,
altre 3 colonne di dimensione 200px,
poi una colonna di dimensione 1fr,
e poi 2 colonne
di dimensione 10%.
