Función repeat en CSS Grid
Si tienes varias columnas
a las que se les asignan los mismos tamaños,
puedes simplificar la escritura usando la
función repeat.
En el primer parámetro de esta función se especifica
la cantidad de columnas, y en el segundo - su ancho.
Veamos con ejemplos
cómo funciona esto.
Ejemplo
Supongamos que tenemos tres columnas del mismo tamaño:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Simplifiquemos la escritura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Ejemplo
Supongamos que tenemos tres columnas del mismo tamaño, y una cuarta de otro tamaño:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Simplifiquemos la escritura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Ejemplo
Supongamos que tenemos las primeras tres columnas de un tamaño, y las segundas tres columnas de otro tamaño:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Simplifiquemos la escritura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Ejemplo
Supongamos que tenemos las primeras tres columnas de un tamaño, luego otra columna, y luego otras tres columnas de otro tamaño:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Simplifiquemos la escritura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Ejemplo
La simplificación funciona para cualquier unidad de tamaño. Supongamos, por ejemplo, que tenemos tres columnas en píxeles:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Simplifiquemos la escritura con repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Tareas prácticas
Crea 4 columnas del mismo
tamaño usando repeat.
Crea 4 columnas de tamaño 100px,
y otras 3 columnas de tamaño 2fr.
Crea 2 columnas de tamaño 100px,
otras 3 columnas de tamaño 200px,
luego una columna de tamaño 1fr,
y luego 2 columnas
de tamaño 10%.
