- Un experimento
- Qué pasó con la cuadrícula
- ¿Qué es la cuadrícula implícita?
- Controlando la cuadrícula implícita
Hasta ahora, hemos trabajado con cuadrículas definidas con precisión: establecíamos un número de filas y columnas y colocábamos los elementos dentro de las celdas.
🤔 Pero surge una pregunta interesante: ¿qué pasa si intentamos ubicar un elemento fuera de los límites de la cuadrícula especificada?
Para entender esto, vamos a hacer un experimento con una cuadrícula de 6x6 en la que cada celda mide 30px x 30px.
Un experimento
Observa la cuadrícula inicial con tres elementos ubicados dentro de los límites establecidos:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Ahora intentemos mover el primer elemento a la columna 7, que aún no existe. Para hacerlo, usamos nth-child para seleccionar el primer elemento y grid-column-start: 7; para moverlo.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Es probable que el resultado te parezca inesperado. El primer elemento efectivamente se ha movido, pero ahora es demasiado ancho y ha empujado los demás elementos hacia una nueva fila.
Qué pasó con la cuadrícula
Si inspeccionamos la cuadrícula con las herramientas de desarrollo del navegador (DevTools), veremos lo siguiente:
Aquí es donde ocurre la magia: la cuadrícula automáticamente creó una nueva columna vacía para colocar el elemento. Como esta nueva columna no tiene un ancho definido, ocupa todo el espacio disponible, lo que provoca que los demás elementos se desplacen.
Intentemos ahora mover el primer elemento a la octava columna:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Ahora el elemento se ha reducido exactamente a la mitad. Si miramos la cuadrícula en DevTools, veremos esto:
Como no especificamos un tamaño fijo, el navegador distribuye el espacio libre entre las nuevas columnas de forma equitativa.
¿Qué es la cuadrícula implícita?
La cuadrícula implícita es la parte de la cuadrícula que no hemos definido explícitamente, pero que se genera automáticamente cuando los elementos lo necesitan.
Este efecto no solo ocurre después de la cuadrícula, sino también antes. Probemos establecer el primer elemento en la columna -8, es decir, una posición antes de la cuadrícula actual.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Ahora la cuadrícula completa se ha desplazado a la derecha, dejando espacio libre a la izquierda para la nueva celda. Al inspeccionar la cuadrícula observamos esto:
Si seguimos moviendo el elemento más a la izquierda (grid-column-start: -9), algo interesante sucede: el segundo elemento se moverá a la cuadrícula implícita.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Eso ocurre porque los elementos están organizados en el flujo natural de la cuadrícula y seguirán acomodándose conforme haya espacio disponible.
Controlando la cuadrícula implícita
Hasta ahora, hemos dejado que el navegador defina automáticamente el tamaño de las pistas implícitas. Pero, para mayor control, usamos dos propiedades:
grid-auto-rows→ Define la altura de las filas implícitas.grid-auto-columns→ Define el ancho de las columnas implícitas.
Probemos agregando grid-auto-columns: 50px;, lo que hará que las columnas implícitas tengan 50 px de ancho en lugar de ocupar todo el espacio disponible.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Ahora, las columnas implícitas tienen un tamaño fijo y el contenedor ya no ocupa toda la pantalla.
grid-auto-rows en acción
Las filas implícitas funcionan un poco diferente. Una celda no puede ser más alta que su contenido, pero podemos establecer un tamaño mínimo con grid-auto-rows.
Observemos este ejemplo con una cuadrícula de 2x2 en la que agregamos un elemento extra que genera una tercera fila implícita.
Si dejamos grid-auto-rows: auto;, la altura de la nueva fila dependerá de su contenido.
Ahora, cambiemos grid-auto-rows a 50px para asegurarnos de que todas las filas tengan una altura consistente.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
Resumen
- La cuadrícula implícita se genera automáticamente cuando ubicamos elementos fuera de la cuadrícula definida.
- Si no especificamos un tamaño, las pistas implícitas ocuparán todo el espacio disponible.
- Podemos controlar el tamaño de las pistas implícitas con
grid-auto-rowsygrid-auto-columns. - El inspector de elementos del navegador nos ayuda a visualizar la cuadrícula y entender su comportamiento.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
