Explorando los poderes implícitos de cuadrícula y ubicación automática de CSS Grid

Cuando se trabaja con CSS Grid, lo primero que debe hacer es establecer display: grid sobre el elemento que queremos que sea se convierte en un contenedor grid. Luego definimos explícitamente la grilla usando una combinación de grid-template-columns, grid-template-rowsy grid-template-areas. Y a partir de ahí, el siguiente paso es colocar elementos dentro de la cuadrícula.

Este es el enfoque clásico que debe usarse y también lo recomiendo. Sin embargo, existe otro enfoque para crear cuadrículas. sin ninguna definición explícita. Llamamos a esto el cuadrícula implícita.

"¿Explícito implícito? ¿Qué diablos está pasando aquí?”

Términos extraños, ¿verdad? Manuel Matuzovic ya tiene una buena explicacion de lo que podemos llamar "implícito" y "explícito" en CSS Grid, pero profundicemos directamente en lo que las sspecificaciones dice:

El grid-template-rows, grid-template-columnsy grid-template-areas propiedades definen un número fijo de pistas que forman la cuadrícula explícita. Cuando los elementos de la cuadrícula se colocan fuera de estos límites, el contenedor de la cuadrícula genera pistas de cuadrícula implícitas al agregar líneas de cuadrícula implícitas a la cuadrícula. Estas líneas junto con la forma de cuadrícula explícita la cuadrícula implícita.

Entonces, en lenguaje sencillo, el navegador genera automáticamente filas y columnas adicionales en caso de que algún elemento se coloque fuera de la cuadrícula definida.

¿Qué pasa con la colocación automática?

Similar al concepto de grilla implícita, colocación automática es la capacidad del navegador para colocar automáticamente los elementos dentro de la cuadrícula. No siempre necesitamos dar la posición de cada elemento.

A través de diferentes casos de uso, veremos cómo estas funciones pueden ayudarnos a crear una cuadrícula compleja y dinámica con unas pocas líneas de código.

barra lateral dinámica

Aquí tenemos tres diseños diferentes, pero solo tenemos una configuración de cuadrícula que funciona para todos ellos.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Solo una columna ocupa todo el espacio libre. Esta es nuestra cuadrícula "explícita". Está configurado para adaptarse a un elemento de cuadrícula en el main contenedor de rejilla. Eso es todo. Una columna y una fila:

Pero, ¿y si decidimos colocar otro elemento allí, digamos un aside (nuestra barra lateral dinámica). Tal como está definida actualmente (y explícitamente), nuestra cuadrícula tendrá que ajustarse automáticamente para encontrar un lugar para ese elemento. Y si no hacemos nada más con nuestro CSS, esto es lo que DevTools nos dice que está sucediendo.

Podemos mover el <aside> a una columna al lado del <section>:

aside {
  grid-column-start: 2;
}

Y esto es lo que DevTools nos dice ahora:

Colocamos nuestro elemento en la segunda columna pero... no tenemos una segunda columna. Extraño, ¿verdad? Nunca declaramos una segunda columna en el <main> contenedor de cuadrícula, ¡pero el navegador creó uno para nosotros! Esta es la parte clave de la especificación que vimos:

Cuando los elementos de la cuadrícula se colocan fuera de estos límites, el contenedor de la cuadrícula genera pistas de cuadrícula implícitas al agregar líneas de cuadrícula implícitas a la cuadrícula.

Esta poderosa característica nos permite tener diseños dinámicos. Si solo tenemos el <section> elemento, todo lo que obtenemos es una columna. Pero si le sumamos un <aside> elemento a la mezcla, se crea una columna adicional para contenerlo.

Podríamos colocar el <aside> antes de <section> en lugar de esto:

aside {
  grid-column-end: -2;
} 

Esto crea la columna implícita al comienzo de la cuadrícula, a diferencia del código anterior que coloca la columna implícita al final.

Podemos hacer lo mismo más fácilmente usando el grid-auto-flow propiedad para configurar todas y cada una de las pistas implícitas para que fluyan en un column dirección:

Ahora no hay necesidad de especificar grid-column-start para colocar el <aside> elemento a la derecha del <section>! De hecho, cualquier otro elemento de cuadrícula que decidamos agregar allí en cualquier momento ahora fluirá en una dirección de columna, cada uno colocado en sus propias pistas de cuadrícula implícitas. ¡Perfecto para situaciones en las que la cantidad de elementos en la cuadrícula no se conoce de antemano!

Dicho esto, todavía necesitamos grid-column-end si queremos colocarlo en una columna a la izquierda de este porque, de lo contrario, el <aside> ocupará la columna explícita que, a su vez, empuja la <section> fuera de la cuadrícula explícita y lo obliga a tomar la columna implícita.

Sé que sé. Eso es un poco complicado. Aquí hay otro ejemplo que podemos usar para comprender mejor esta pequeña peculiaridad:

En el primer ejemplo, no especificamos ninguna ubicación. En este caso, el navegador colocará primero el <aside> elemento en la columna explícita ya que viene primero en el DOM. los <section>, mientras tanto, se coloca automáticamente en la columna de la cuadrícula que el navegador crea automáticamente (o implícitamente) para nosotros.

En el segundo ejemplo, establecemos el <aside> elemento fuera de la grilla explícita:

aside {
  grid-column-end: -2;
}

Ahora no importa que <aside> viene primero en el HTML. Al reasignar <aside> en otro lugar, hemos hecho el <section> elemento disponible para tomar la columna explícita.

cuadrícula de imagen

Probemos algo diferente con una cuadrícula de imágenes donde tenemos una imagen grande y algunas miniaturas al lado (o debajo).

Tenemos dos configuraciones de rejilla. ¿Pero adivina que? ¡No estoy definiendo ninguna cuadrícula en absoluto! Todo lo que estoy haciendo es esto:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Es sorprendente que solo necesitemos una línea de código para lograr algo como esto, así que analicemos lo que está sucediendo y verá que es más fácil de lo que piensa. Ante todo, grid-area es una propiedad abreviada que combina las siguientes propiedades en una sola declaración:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

¡Esperar! no es grid-area la propiedad que usamos para definir áreas nombradas en lugar de dónde comienzan y terminan los elementos en la cuadrícula?

Sí, pero también hace más. Podríamos escribir mucho más sobre grid-area, pero en este caso particular:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Podemos ver lo mismo al abrir DevTools para expandir la versión abreviada:

Esto significa que el primer elemento de imagen en la cuadrícula debe abarcar tres columnas y tres filas. Pero como no definimos ninguna columna o fila, el navegador lo hace por nosotros.

Básicamente, hemos colocado la primera imagen en el HTML para que ocupe una cuadrícula de 3⨉3. Eso significa que cualquier otra imagen se colocará automáticamente en esas mismas tres columnas sin necesidad de especificar nada nuevo.

Para resumir, le dijimos al navegador que la primera imagen necesita ocupar el espacio de tres columnas y tres filas que nunca definimos explícitamente al configurar el contenedor de cuadrícula. El navegador configura esas columnas y filas para nosotros. Como resultado, las imágenes restantes en el HTML fluyen directamente en su lugar usando las mismas tres columnas y filas. Y dado que la primera imagen ocupa las tres columnas de la primera fila, las imágenes restantes fluyen hacia filas adicionales que contienen tres columnas cada una, donde cada imagen ocupa una sola columna.

¡Todo esto desde una línea de CSS! Ese es el poder de la cuadrícula "implícita" y la colocación automática.

Para la segunda configuración de cuadrícula en esa demostración, todo lo que hice fue cambiar la dirección del flujo automático usando grid-auto-flow: column de la misma manera que hicimos antes al colocar un <aside> elemento junto a un <section>. Esto obliga al navegador a crear un cuarto columna que puede usar para colocar las imágenes restantes. Y como tenemos tres filas, las imágenes restantes se colocan dentro de la misma columna vertical.

Necesitamos agregar algunas propiedades a las imágenes para asegurarnos de que encajen bien dentro de la cuadrícula sin ningún desbordamiento:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Y, por supuesto, podemos actualizar fácilmente la cuadrícula para considerar más imágenes ajustando un valor. ese seria el 3 en los estilos para la imagen grande. Tenemos esto:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Pero podríamos agregar una cuarta columna simplemente cambiándola a 4 en lugar:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Aún mejor: configuremos eso como una propiedad personalizada para que las cosas sean aún más fáciles de actualizar.

Diseños dinámicos

El primer caso de uso con la barra lateral fue nuestro primer diseño dinámico. Ahora abordaremos diseños más complejos donde la cantidad de elementos dictará la configuración de la cuadrícula.

En este ejemplo, podemos tener de uno a cuatro elementos en los que la cuadrícula se ajuste de manera que se adapte perfectamente a la cantidad de elementos sin dejar huecos incómodos o espacios faltantes.

Cuando tenemos un elemento, no hacemos nada. El elemento se estirará para llenar la única fila y columna creada automáticamente por la cuadrícula.

Bit cuando agregamos el segundo elemento, creamos otra columna (implícita) usando grid-column-start: 2.

Cuando agregamos un tercer elemento, debe ocupar el ancho de dos columnas, por eso usamos grid-column-start: span 2, pero solo si es el :last-child porque si (y cuando) agregamos un cuarto elemento, ese solo debería ocupar una sola columna.

Sumando eso, tenemos cuatro configuraciones de rejilla con sólo dos declaraciones y la magia de la grilla implícita:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Probemos con otro:

No estamos haciendo nada para el primer y segundo caso donde solo tenemos uno o dos elementos. Sin embargo, cuando agregamos un tercer elemento, le decimos al navegador que, siempre que sea el :last-child — debe abarcar dos columnas. Cuando agregamos un cuarto elemento, le decimos al navegador que el elemento debe colocarse en la segunda columna.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

¿Estás empezando a entender el truco? Le damos al navegador instrucciones específicas basadas en la cantidad de elementos (usando :nth-child) y, a veces, una instrucción puede cambiar el diseño por completo.

Cabe señalar que el dimensionamiento no será el mismo cuando trabajemos con diferentes contenidos:

Dado que no definimos ningún tamaño para nuestros elementos, el navegador los dimensiona automáticamente según su contenido y es posible que terminemos con un tamaño diferente al que acabamos de ver. Para superar esto, tenemos que explícitamente especifique que todas las columnas y filas tienen el mismo tamaño:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

¡Oye, aún no hemos jugado con esas propiedades! grid-auto-rows y grid-auto-columns establecer el tamaño de filas y columnas implícitas, respectivamente, en un contenedor de cuadrícula. o, como la especificación lo explica:

El grid-auto-columns y grid-auto-rows Las propiedades especifican el tamaño de las pistas a las que no se les ha asignado un tamaño. grid-template-rows or grid-template-columns.

Aquí hay otro ejemplo donde podemos subir hasta seis elementos. Esta vez te dejaré diseccionar el código. No se preocupe, los selectores pueden parecer complejos, pero la lógica es bastante sencilla.

Incluso con seis elementos, solo necesitábamos dos declaraciones. ¡Imagínese todos los diseños complejos y dinámicos que podemos lograr con unas pocas líneas de código!

que pasa con eso grid-auto-rows y ¿por qué toma tres valores? ¿Estamos definiendo tres filas?

No, no estamos definiendo tres filas. Pero nosotros en definiendo tres valores como un patrón para nuestras filas implícitas. La logica es como sigue:

• Si tenemos una fila, se dimensionará con el primer valor.
• Si tenemos dos filas, la primera obtiene el primer valor y la segunda el segundo valor.
• Si tenemos tres filas, se utilizarán los tres valores.
• Si tenemos cuatro filas (y aquí viene lo interesante), usamos los tres valores para las primeras tres filas y reutilizamos el primer valor nuevamente para la cuarta fila. Por eso es una especie de patrón que repetimos para dimensionar todas las filas implícitas.
• Si tenemos 100 filas, se dimensionarán de tres en tres para tener 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, etc.

Diferente a la grid-template-rows que define el número de filas y sus tamaños, grid-auto-rows solo fila de tamaños que se pueden crear en el camino.

Si volvemos a nuestro ejemplo, la lógica es tener el mismo tamaño cuando se crean dos filas (usaremos el 2fr 2fr), pero si se crea una tercera fila, la hacemos un poco más pequeña.

Patrones de cuadrícula

Para esto último, vamos a hablar de patrones. Probablemente haya visto esos diseños de dos columnas donde una columna es más ancha que la otra, y cada fila alterna la ubicación de esas columnas.

Este diseño de clasificación también puede ser difícil de lograr sin saber exactamente cuánto contenido estamos tratando, pero los poderes implícitos de ubicación automática de CSS Grid lo hacen relativamente fácil.

Echa un vistazo al código. Puede parecer complejo, pero vamos a desglosarlo porque termina siendo bastante sencillo.

Lo primero que debe hacer es identificar el patrón. Pregúntese: "¿Después de cuántos elementos debe repetirse el patrón?" En este caso es después de cada cuatro elementos. Entonces, veamos el uso de solo cuatro elementos por ahora:

Ahora, definamos la cuadrícula y configuremos el patrón general usando el :nth-child selector para alternar entre elementos:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Dijimos que nuestro patrón se repite cada cuatro elementos, por lo que lógicamente usaremos 4n + x donde x varía de 1 a 4. Es un poco más fácil explicar el patrón de esta manera:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfecto, ¿verdad? Tenemos cuatro elementos y repetimos el patrón en el quinto elemento, el noveno elemento y así sucesivamente.

aquellos :nth-child ¡los selectores pueden ser complicados! Chris tiene una muy útil explicacion de como funciona todo, incluyendo recetas para crear diferentes patrones.

Ahora configuramos cada elemento para que:

1. El primer elemento debe tomar dos columnas y comenzar en la columna uno (grid-column: 1/span 2).
2. El segundo elemento se coloca en la tercera columna (grid-column-start: 3).
3. El tercer elemento se coloca en la primera columna: (grid-column-start: 1).
4. El cuarto elemento toma dos columnas y comienza en la segunda columna: (grid-column: 2/span 2).

Aquí eso está en CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Podríamos detenernos aquí y terminar... ¡pero podemos hacerlo mejor! Específicamente, podemos eliminar algunas declaraciones y confiar en los poderes de colocación automática de grid para que hagan el trabajo por nosotros. Esta es la parte más difícil de asimilar y requiere mucha práctica para poder identificar qué se puede eliminar.

Lo primero que podemos hacer es actualizar grid-column: 1 /span 2 y usar solo grid-column: span 2 ya que, por defecto, el navegador colocará el primer elemento en la primera columna. También podemos eliminar esto:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Al colocar los elementos primero, segundo y cuarto, la cuadrícula coloca automáticamente el tercer elemento en el lugar correcto. Eso significa que nos quedamos con esto:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

¡Pero vamos, podemos caminar mejor! También podemos eliminar esto:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

¿Por qué? Si colocamos el cuarto elemento en la segunda columna y permitimos que ocupe dos columnas completas, estamos obligando a la cuadrícula a crear una tercera columna implícita, lo que nos da un total de tres columnas sin indicarle explícitamente que lo haga. El cuarto elemento no puede ir a la primera fila ya que el primer elemento también ocupa dos columnas, por lo que fluye a la siguiente fila. Esta configuración nos deja con una columna vacía en la primera fila y otra vacía en la segunda fila.

Creo que conoces el final de la historia. El navegador colocará automáticamente el segundo y el tercer elemento en esos lugares vacíos. Entonces nuestro código se vuelve aún más simple:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Todo lo que se necesita son cinco declaraciones para crear un patrón genial y muy flexible. La parte de optimización puede ser complicada, pero te acostumbras y adquieres algunos trucos con la práctica.

Por qué no usar grid-template-columns definir columnas explícitas ya que sabemos el número de columnas?

¡Podemos hacerlo! Aquí está el código para ello:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Como puede ver, el código es definitivamente más intuitivo. Definimos tres columnas de cuadrícula explícitas y le decimos al navegador que los elementos primero y cuarto deben tomar dos columnas. ¡Recomiendo encarecidamente este enfoque! Pero el objetivo de este artículo es explorar nuevas ideas y trucos que obtenemos de los poderes implícitos y de colocación automática de CSS Grid.

El enfoque explícito es más sencillo, mientras que una cuadrícula implícita requiere que (disculpe el juego de palabras) complete los espacios en los que CSS está haciendo un trabajo adicional detrás de escena. Al final, creo que tener una comprensión sólida de las cuadrículas implícitas lo ayudará a comprender mejor el algoritmo CSS Grid. Después de todo, no estamos aquí para estudiar lo que es obvio, ¡estamos aquí para explorar territorios salvajes!

Probemos con otro patrón, un poco más rápido esta vez:

Nuestro patrón se repite cada seis elementos. Cada uno de los elementos tercero y cuarto debe ocupar dos filas completas. Si colocamos el tercer y cuarto elemento, parece que no necesitamos tocar los demás, así que probemos lo siguiente:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Mmm, nada bueno. Necesitamos colocar el segundo elemento en la primera columna. De lo contrario, la cuadrícula lo colocará automáticamente en la segunda columna.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Mejor, pero todavía hay más trabajo. Necesitamos mover el tercer elemento hacia arriba. Es tentador intentar colocarlo en la primera fila de esta manera:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Pero esto no funciona porque obliga a todos los 6n + 3 elementos para ser colocados en la misma área que hace un diseño desordenado. La solución real es mantener la definición inicial del tercer elemento y agregar grid-auto-flow: dense para llenar los huecos. De MDN:

[El] algoritmo de empaquetado "denso" intenta llenar en huecos anteriores en la rejilla, si surgen elementos más pequeños más tarde. Esto puede hacer que los artículos parezcan desordenados, cuando al hacerlo se llenarían los huecos que dejan los artículos más grandes. Si se omite, se usa un algoritmo "disperso", en el que el algoritmo de ubicación solo se mueve "hacia adelante" en la cuadrícula al colocar elementos, nunca retrocede para llenar los huecos. Esto garantiza que todos los elementos colocados automáticamente aparezcan "en orden", incluso si esto deja huecos que podrían haberse llenado con elementos posteriores.

Sé que esta propiedad no es muy intuitiva, pero nunca la olvide cuando se enfrente a un problema de ubicación. Antes de probar diferentes configuraciones en vano, agréguelo porque puede arreglar su diseño sin esfuerzo adicional.

¿Por qué no agregar siempre esta propiedad por defecto?

No lo recomiendo porque, en algunos casos, no queremos ese comportamiento. Observe cómo la explicación de la MDN menciona que hace que los elementos fluyan "fuera de orden" para llenar los huecos que dejan los elementos más grandes. El orden visual suele ser tan importante como el orden de origen, especialmente cuando se trata de interfaces accesibles, y grid-auto-flow: dense a veces puede causar una discrepancia entre el orden visual y el de la fuente.

Nuestro código final es entonces:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

¿Otro? ¡Vamos!

Para este, no hablaré demasiado y en su lugar les mostraré una ilustración del código que he usado. Intenta ver si entiendes cómo llegué a ese código:

Los elementos en negro se colocan implícitamente en la cuadrícula. Cabe señalar que podemos obtener el mismo diseño de más maneras de las que yo llegué allí. ¿Puedes descifrar eso también? ¿Qué pasa con el uso grid-template-columns? Comparte tus trabajos en la sección de comentarios.

Os dejo con un último patrón:

Que hago tener una solución para este pero es tu turno de practicar. Tome todo lo que hemos aprendido e intente codificarlo usted mismo y luego compárelo con mi solución. No se preocupe si termina con algo detallado: lo más importante es encontrar una solución que funcione.

¿Quierés más?

Antes de terminar, quiero compartir algunas preguntas de Stack Overflow relacionadas con CSS Grid donde intervine con respuestas que usan muchas de las técnicas que cubrimos aquí juntos. Es una buena lista que muestra cuántos casos de uso reales y situaciones del mundo real surgen donde estas cosas son útiles:

Terminando

CSS Grid ha existido durante años, pero todavía hay muchos trucos poco conocidos y usados ​​que no se discuten ampliamente. ¡Las características implícitas de cuadrícula y ubicación automática son dos de ellas!

Y sí, ¡esto puede ser un desafío! Me tomó mucho tiempo asimilar la lógica detrás de las cuadrículas implícitas y todavía lucho con la colocación automática. Si desea dedicar más tiempo a comprender las cuadrículas explícitas e implícitas, aquí hay un par de explicaciones y ejemplos adicionales que vale la pena consultar:

Del mismo modo, es posible que desee leer sobre grid-auto-columns en CSS-Tricks Almanac porque Mojtaba Seyedi entra en gran detalle e incluye imágenes increíblemente útiles para ayudar a explicar el comportamiento.

Como dije cuando comenzamos, los métodos que cubrimos aquí no pretenden reemplazar las formas comunes que ya conoce para construir cuadrículas. Simplemente estoy explorando diferentes formas que pueden ser útiles en algunos casos.