Cuando trabajamos con datos dinámicos provenientes de una API, no siempre sabemos cuántos elementos vamos a renderizar. Hoy pueden ser tres cards y mañana veinte. Definir manualmente cada fila y columna se vuelve insostenible, y es aquí donde la grid implícita de CSS se convierte en una herramienta fundamental para cualquier frontend developer que quiera construir layouts flexibles y escalables.
¿Qué es un track y por qué importa en CSS Grid?
Un track es la unión de dos o más celdas dentro de una grilla [0:18]. Puede ser una fila completa o una columna completa. Cuando definimos nuestras filas y columnas con grid-template-rows y grid-template-columns, estamos creando tracks de forma explícita, es decir, le indicamos al navegador exactamente cuántos queremos y de qué tamaño.
El problema aparece cuando el contenido es dinámico. Imagina que consumes una API y recibes tres elementos, pero al día siguiente el backend agrega más datos y ahora son seis [0:44]. Como frontends, no podemos estar contando elementos constantemente para ajustar nuestro CSS.
¿Cómo funciona la grid implícita para contenido dinámico?
La grid implícita significa que no necesitamos definir absolutamente nada desde el principio más allá de lo esencial [1:20]. Por ejemplo, si establecemos tres columnas, los elementos adicionales se organizarán automáticamente en las filas necesarias sin intervención manual.
¿Cómo se ubican los elementos con líneas de grid?
Cuando posicionamos elementos de forma explícita, contamos las líneas de la cuadrícula, no las filas ni las columnas como tal [2:10]. Por ejemplo:
grid-column: 1 / 2 indica que el elemento empieza en la línea 1 y termina en la línea 2.grid-row: 1 / 2 ubica el elemento entre la primera y segunda línea de fila.
Para un segundo elemento que debe ir debajo del primero, cambiamos las líneas de fila: grid-row: 2 / 3. La clave está en visualizar las líneas y contar desde dónde empieza hasta dónde termina cada elemento.
¿Qué pasa cuando se crean columnas implícitas con tamaño cero?
Cuando un nuevo elemento se ubica en una zona no definida, CSS Grid crea columnas o filas implícitas con un tamaño de cero [3:36]. Esto produce un resultado visual inesperado: los elementos aparecen comprimidos o con espacios extraños que no corresponden al diseño solicitado.
Para resolver esto existen dos propiedades esenciales:
grid-auto-columns: define el tamaño que tendrán las columnas creadas automáticamente [3:52]. Cada vez que llega un nuevo elemento, la columna implícita se genera con el ancho exacto que especifiquemos.grid-auto-rows: hace lo mismo pero para filas generadas de forma automática.
¿Qué hace grid-auto-flow y cuándo usarlo?
La propiedad grid-auto-flow controla la dirección en la que se colocan los nuevos elementos [4:24]. Acepta dos valores principales:
row: los elementos se van agregando en nuevas filas.column: los elementos se van agregando en nuevas columnas.
Esto es especialmente útil cuando no sabemos la cantidad de datos que llegarán. Inicialmente pueden ser cinco, pero después pueden ser veinte, y el layout se ajusta sin que tengamos que modificar el código [4:30].
El quiz propuesto en la sesión plantea una pregunta clave: ¿con qué propiedad o propiedades de CSS podemos darle tamaño a tracks implícitos? Las opciones son grid-gap, grid-auto-columns y grid-auto-rows [4:50]. La recomendación es abrir CodePen, escribir el código y experimentar antes de responder.
La mejor forma de consolidar estos conceptos es la práctica constante [5:15]. Toma cualquiera de los ejemplos, replícalo en CodePen y observa cómo se comportan las propiedades. Las definiciones se olvidan con el tiempo, pero la experiencia práctica permanece. En la próxima sesión se abordarán funciones de CSS Grid como repeat, minmax y fit-content con mucho más detalle.
