Limitações de CSS Grid para designs complexos

Usuario eliminado 27864 · 18/02/2019

Pues eso, Grid es fabuloso para construir únicamente plantillas simples pero cuando se trata de algo complejo y más estructurado ES UNA PORQUERIA!

Un ejemplo:

Cuando se crean los grids deben de tener un x alto proporcional al otro o pasará como en la imagen donde ciertos diseños son incapaces de realizar en Grid.

¿Que opinan?

paskuvan · 18/02/2019

probaste con flexbox grid?

Flexbox Grid

antes usaba css grid, a veces no me ha servido en algunas plantillas

Usuario eliminado 27864 · 18/02/2019

paskuvan disse:
probaste con flexbox grid?

Flexbox Grid

antes usaba css grid, a veces no me ha servido en algunas plantillas

La cuestión es ordenar los divs dándoles las posiciones que quieras algo que Flex no puede hacer, la única forma que veo es usando javascript pero perdería toda la gracia del Grid.

Stron · 18/02/2019

sim disse:
La cuestión es ordenar los divs dándoles las posiciones que quieras algo que Flex no puede hacer, la única forma que veo es usando javascript pero perdería toda la gracia del Grid.

Creo que tratas de hacer un masonry layaut, la unica forma de hacerlo es con javascript, efectivamente ni flex ni css grid sirven para eso algunos dirán que si, pero siempre quedan los espacios, ya que solo puedes crear cuadriculas perfectas.

creo que lo tendras que hacer con javascript
masonry layout edteam

Usuario eliminado 27864 · 18/02/2019

Stron disse:
Creo que tratas de hacer un masonry layaut, la unica forma de hacerlo es con javascript, efectivamente ni flex ni css grid sirven para eso algunos dirán que si, pero siempre quedan los espacios, ya que solo puedes crear cuadriculas perfectas.

creo que lo tendras que hacer con javascript
masonry layout edteam

No es un masonry layout compañero es una estructura web.

Lateral izquierdo: wallpaper, informacion, caja de comentarios
Lateral derecho: Estadísticas, relacionados.

Para esta estructura en pantallas menores a 600px debería ser:

Wallpaper
Estadisticas
Informacion
Relacionados
Caja de comentarios.

Como puedes ver con grid es bastante fácil de estructurarlo pero no sirve para este caso y grid se supone que se creó para evitar usar js

Stron · 18/02/2019

sim disse:
No es un masonry layout compañero es una estructura web.

Lateral izquierdo: wallpaper, informacion, caja de comentarios
Lateral derecho: Estadísticas, relacionados.

Para esta estructura en pantallas menores a 600px debería ser:

Wallpaper
Estadisticas
Informacion
Relacionados
Caja de comentarios.

Como puedes ver con grid es bastante fácil de estructurarlo pero no sirve para este caso y grid se supone que se creó para evitar usar js

Pense que eso era por el ejemplo de la izquierda, una disculpa, normalmente yo uso css grid solo para galerías, ahí casi no hay problemas, pero como dices siempre hay que dar un tamaño proporcional.

Usuario eliminado 27864 · 18/02/2019

Stron disse:
Pense que eso era por el ejemplo de la izquierda, una disculpa, normalmente yo uso css grid solo para galerías, ahí casi no hay problemas, pero como dices siempre hay que dar un tamaño proporcional.

Una pena la verdad, Grid soluciona muchos problemas a la hora de realizar las versiones responsive pero para proyectos con estructura compleja queda totalmente fuera y pierde todo su propósito por el que se creó.

-.-" habrá que usar js.

celciusb · 18/02/2019

¿Y si cambias el order usando flex con media queries?

De esa forma podrías dejar en pantallas menores a 600 como quieres.

Mask7OfDragon · 18/02/2019

con Flexbox es posible hacerlo

solo debes separar el layout en dos (50% y 50%)
posteriormente hacer los contenedores con css.

A Complete Guide to Flexbox | CSS-Tricks

Usuario eliminado 27864 · 19/02/2019

Mask7OfDragon disse:
con Flexbox es posible hacerlo

solo debes separar el layout en dos (50% y 50%)
posteriormente hacer los contenedores con css.

A Complete Guide to Flexbox | CSS-Tricks

Si se dividen en 2 ya no tendría la misma estructura que se quiere llegar en los dispositivos móviles, ni el flex ni grid ni absolutamente nada más que js.

Seguiré probando un par de horas mas si lo consigo hacer sin el uso del js os dejo el código íntegro aquí.

Limitações de CSS Grid para designs complexos

Usuario eliminado 27864

paskuvan

Usuario eliminado 27864

Stron

Usuario eliminado 27864

Stron

Usuario eliminado 27864

celciusb

Mask7OfDragon

Usuario eliminado 27864