La fonction repeat dans les grilles CSS
Si vous avez plusieurs colonnes
auxquelles sont attribuées des tailles identiques,
vous pouvez simplifier l'écriture en utilisant
la fonction repeat.
Le premier paramètre de cette fonction spécifie
le nombre de colonnes, et le second - leur largeur.
Voyons sur des exemples
comment cela fonctionne.
Exemple
Supposons que nous ayons trois colonnes de même taille :
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Simplifions l'écriture avec repeat :
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Exemple
Supposons que nous ayons trois colonnes de même taille, et une quatrième d'une taille différente :
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Simplifions l'écriture avec repeat :
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Exemple
Supposons que nous ayons les trois premières colonnes d'une taille, et les trois suivantes d'une autre taille :
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Simplifions l'écriture avec repeat :
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Exemple
Supposons que nous ayons les trois premières colonnes d'une taille, puis une autre colonne, puis encore trois colonnes d'une autre taille :
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Simplifions l'écriture avec repeat :
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Exemple
La simplification fonctionne pour toutes les unités de taille. Supposons par exemple que nous ayons trois colonnes en pixels :
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Simplifions l'écriture avec repeat :
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Tâches pratiques
Créez 4 colonnes de
même taille à l'aide de repeat.
Créez 4 colonnes de taille 100px,
et encore 3 colonnes de taille 2fr.
Créez 2 colonnes de taille 100px,
encore 3 colonnes de taille 200px,
puis une colonne de taille 1fr,
et ensuite 2 colonnes
de taille 10%.
