Sergio Estrella
PreguntaQué pasa si se define con grid-auto-columns, por ejemplo, 2 tamaños, pero sobran 4.
¿Cómo define esas dos celdas restantes? ¿Repite el patrón?
Alejandro Tangarife Rivas
Hola, sergioestrella. Eso lo defines con grid-auto-columns. Lo que haces es (en primera instancia), con grid-template-columns defines los 2 primeros tamaños, y con grid-auto-flow defines los tamaños automáticos de esos últimos 2 grids (los 2 últimos, a los que no asignaste un tamaño en grid-template-columns).
Detallado: con grid-template-columns das tamaños, si colocas un solo valor, todos van a tener ese valor por defecto. Pero si le asignas 2 o más valores, irá tomando esos valores en orden (el primer valor para el primer grid) y así sucesivamente. Cuando asignas valores (digamos unos 3), eso va a tomar los 3 primeros grids, y el resto NO tendrá valores establecidos; Para que eso No suceda utilizas grid-auto, va a hacer que: las columnas o filas que no definiste su tamaño, les va dar un valor automático definido por grid-auto.
Luis Lira
Perfecto, ya entiendo mejor y justo como dices, los patrones se repiten sin importar que haya más elementos de los que pensaste. Porque aunque lo estés manejando de manera explícita, al detectarse eso, lo manejar de nuevo de forma implícita :D
Sergio Estrella
Justamente me puse a experimentar y resolví la duda 😅 Deja te explico. Tenía la duda de qué pasaba si definíamos un grid-auto-columns para dos columnas que sobraban, pero en realidad sobraban más. Es decir, definía un grid con 3 columnas y 1 fila, un grid-auto-columns para 2, pero tenía 7 items (Los 3 de las columnas, los dos del grid-auto-columns y 2 restantes) Entonces tenía la duda de ¿Qué pasaba con esos 2 que sobraban? ¿Se les daba otro valor predefinido? ¿Se repetía el patrón del grid-auto-columns? Pero haciendo pruebas, me dí cuenta que se repite el patrón 😄
Luis Lira
Hola!
Quisiera ayudar, pero no me queda clara la pregunta, ¿cómo se te ocurre que podría ser el código para probar eso?. Algo que también puedes hacer es poner ese mismo código en tu práctica y ver qué es lo que pasa cuando mueves las propiedades de CSS, te recomiendo experimentar siempre con las dudas que tengas y esto servirá para que vayas viendo qué pasa en ciertos casos.
