CSS Subgrid

Con respecto al Quíz, me costó entenderlo porque los colores me confundieron jaja, pero básicamente es la A porque, si miramos únicamente el cuadrado azul, este es una grid que tiene 5 columnas (así que imaginémonos que ese cuadrado se divide en 5 columnas), pero las filas las está heredando, por tanto la respuesta es la A 😄

Lo que se hereda no es la “cantidad”, ella dijo “hereda mismo tamaño y número de tracks” (0:30). Al colocar “subgrid” a un hijo QUE ABARCA VARIAS CELDAS, permites que una parte de la grid-padre ( ya sea column, row o ambas) le pase por encima, permitiéndole utilizar la grid que el padre ya creó justo donde el está (en lugar de cancelarla o tener que crear una grid nueva). Creo que esto solo tiene sentido para elementos hijo que abarcan varias celdas.
.
En el quiz: ella solo está permitiendo a los ROWS del padre (.container) pasar por encima del hijo (.item), a la vez que crea 5 columnas que no están delineadas o coloreadas, pero si lees el grid-template-columns de .item te darás cuenta que ahora hay 5 columnas donde el padre sólo tenía tres.
.
Imagina que cuando dicen “tracks” son las ruedas de un camión de juguete que marca sus huellas en la tierra de arriba hacia abajo y de izquierda a derecha, el camión dejará su huella en el eje del recuadro hijo donde pongas “subgrid”:
.

grid-template-columns: subgrid --> el camión pasará de arriba hacia abajo siguiendo la grid padre (block-axis)

.

grid-template-rows: subgrid --> el camión pasará de izquierda a derecha imitando la grid del padre (inline-axis)

.
gracias por venir a mi ted talk espero no haberme equivocado en nada o confundido :’)

Es la “A” porque item es una nueva Grid dentro de otra Grid…

Aquí esta el código https://codepen.io/jhonprograma/pen/OJpGWQX, me costo entenderlo pero lo tengo claro, no hereda la misma cantidad de columnas y filas sino de traks.

Tienen que abrirlo en firefox para que vean cómo funciona.

Respecto al Quiz es la opcion A, ya que debemos imaginarnos que el cuadrado color lightcyan tiene 5 columnas y el subitem ocupa la posicion inicial, es decir la primera area. Basandome en que tiene 5 columnas la mejor imagen es la opcion A

A.

subgrid tiene toda la pinta de ser deprecado

Por lo menos se ve más bonito el callback hell con “subgrid” que el callback hell con “javascript” 😄

Uff, los colores me mataron…

Subgrid en estos momentos esta en fase de experimentación, como podemos ver solo tiene compatibilidad con firefox, lo que no sería ideal que llevemos un tema de subgrid a un tema de producción precisamente por la falta de compatibilidad que tiene ahora, lo ideal es que miremos en la esquina superior derecha el tema de global y ese porcentaje ya nos va indicar si podemos utilizarlo y sino dependiendo de que tan alto esté ese porcentaje.

👌

Es la A porque cuando se crean 5 columnas se arma una sexta auto, así que eso. por eso se toma como la sexta parte o la mitad de la primera.

Quiz: Solución A.
Porque se herda el mismo numero de filas, y dentro de su ubicacion divide nuevamente su espacio para obtener las columnas.

¿Cómo se aplica?

• En la propiedad:

Grid template columns:

or

grid-template-rows: 

El valor de subgrid heredará el tamaño y número de espacios dentro del padre. Y una vez heredado un valor, ya sea column o row se realiza la división de espacios que requiere el grid nuevo.

• Se aplica a una sola línea para que tenga un punto de referencia para la herencia.

Resumen:

Nueva propiedad llamada subgrid

• Para qué sirve? : Permite generar una subcuadricula dentro de una cuadricula ya existente para ubicar elementos con mayor precisión.

• en contra: Aun no ha sido adaptada a muchos navegadores, solamente aplica para Mozilla Firefox.

Si pensé que era la A por que el cuadrado amarillo en la B corresponde a 1/3 del área en columnas del div que la contiene… y pues debería ser 1/5 :3

digo q es la A por que en el ultimo hijo la grid dice q solo se tome media porción del primer cuadrado

Tenemos una grilla inicial de 4 x 4, dentro de esta grid tenemos un elemento que se ubica desde la fila 2 hasta la 5 y desde la columna 2 hasta la 5, a su vez este tiene una grid de 5 x 3. Por ultimo tenemos el elemento subitem que se ubica desde la columna 1 a la 2 y desde la fila 1 a la dos. Importante tener en vive en la 2da grid y no en la grid inicial. La respuesta es la A

Es tricky, porque si no estoy mal, tanto A como B respetan a la propiedad subgrid que afecta a las rows.
Sin embargo, lo que es distintivo y nos hace ver que es A, es porque item tiene 5 columnas, y subitem (amarillo) cubre 1 de esas 5.
B claramente cubre 1/3 de las columnas, descartando automáticamente esta opción.

Espero a alguien le sirva! Saludoss

la respuesta seria la “A”, ya que en la segunda etiqueta se esta fraccionando el esta pació, no se le esta dando un tamaño exacto, por lo tal el ultimo contenedor toma el espacio de una fracción.

Ya conocía y me gusta mucho subgrid, espero siga creciendo para poder usarlo, me parece bastante útil.

No noto la diferencia , los colores jugaron en mi contra 😕

Quiz, la respuesta es la A, prácticamente viendo que hijo cuenta con 5 columnas y te tienen que estar repartidas entre 4 columnas del padre, es obio que las dichas columnas no tendría el mismo tamaño de las columnas del padre, y la B tiene las mismas medidas, prácticamente por solo descarte se puede llegar a la respuesta

Es la A…

Segun yo, solo me guie por el sub item, y la respuesta del 1/2 que es lo que abarca la celda con ese color.

Y pues la que mas se acerca es la A. 😃