Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

CSS Subgrid

25/28
Recursos

Aportes 25

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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. 😃