Una vez activas Grid, la siguiente pregunta es obvia: "Muy bien, ¿y cuántas columnas quiero?". Por defecto, Grid no asume nada: necesitas decírselo tú.
La propiedad que define la estructura horizontal de la cuadrícula se llama grid-template-columns. Y podrías escribirla así:
Funciona. Crea tres columnas iguales, una al lado de la otra. Pero también repite lo mismo tres veces, como si no hubiéramos aprendido nada de los shorthands ni de la pereza inteligente.
Y si en vez de tres columnas quisieras doce... bueno, ya te imaginas el desfile de 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr.
Para ahorrarnos eso existe repeat().
grid-template-columns con repeat()repeat() es una función de Grid que dice "repíteme este patrón tantas veces". Recibe dos cosas: cuántas veces y qué.
Lo que estás diciendo, traducido al lenguaje humano, es:
repeat(3, ...): crea 3 columnas.1fr: y que cada una mida una fracción igual del espacio disponible.Resultado: tres columnas del mismo ancho, sin importar el tamaño de la pantalla. Limpio. Legible. Elegante.
Si mañana cambias 3 por 4, tendrás cuatro columnas. Si lo cambias por 12, doce. Sin reescribir nada más.
Cuando escribes grid-template-columns, no estás diciendo cuántos elementos habrá. Estás diciendo cuántos huecos horizontales tiene cada fila.
Eso significa que:
Esta diferencia es clave: una cosa es la estructura de la cuadrícula, y otra la cantidad de contenido que cae dentro.
fr?fr viene de fraction (fracción). Es una unidad especial que solo existe en Grid, y sirve para repartir el espacio libre del contenedor entre las columnas.
La idea es muy simple: las columnas con fr se reparten lo que sobra de manera proporcional.
repeat(3, 1fr): tres columnas iguales, cada una se lleva un tercio.repeat(4, 1fr): cuatro columnas iguales, cada una se lleva un cuarto.1fr 2fr: dos columnas; la segunda es el doble de ancha que la primera.200px 1fr: la primera mide exactamente 200px, y la segunda se queda con todo el resto del espacio.Es como repartir una pizza entre personas razonables: si todos piden "una parte igual", se divide en partes iguales. Si alguien pide "el doble", se le da el doble.
fr y no porcentajes?Podrías pensar: "¿y si uso 33% tres veces?". Funcionaría... casi. Los porcentajes no tienen en cuenta el gap entre columnas, así que en cuanto añadieras separación entre celdas, se desbordaría todo.
fr sí lo tiene en cuenta. Reparte solo el espacio que realmente sobra después de descontar márgenes y gaps. Por eso es la unidad estándar para columnas en Grid.
En esta lección solo estás definiendo columnas. Las filas no hace falta declararlas todavía: Grid las crea automáticamente con la altura que necesiten sus contenidos.
Por ejemplo, si tuvieras esto:
y metieras cinco tarjetas dentro, el resultado sería:
Sin floats. Sin cálculos manuales. Sin decirle a cada elemento dónde romper la línea.
repeat(3, 1fr) no significa "haz tres cajas". Significa "cada fila tiene tres columnas iguales". Luego Grid reparte los hijos sobre esa plantilla.
Cuando interiorizas eso, dejas de escribir CSS por imitación y empiezas a entender qué está haciendo de verdad el layout.
Haz que .tablero tenga tres columnas iguales usando grid-template-columns: repeat(3, 1fr). No te olvides de mantener display: grid en el contenedor.
La cuadrícula ya no existe solo en tu mente. Ahora CSS también la entiende...