Limitaciones de CSS Grid para diseños complejos

  • Autor Autor Usuario eliminado 27864
  • Fecha de inicio Fecha de inicio
U

Usuario eliminado 27864

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:

Captura de pantalla (194).webp

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?
 
probaste con flexbox grid?

Flexbox Grid

antes usaba css grid, a veces no me ha servido en algunas plantillas
 
paskuvan dijo:
probaste con flexbox grid?

Flexbox Grid

antes usaba css grid, a veces no me ha servido en algunas plantillas
Hacer clic para expandir...

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.
 
sim dijo:
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.
Hacer clic para expandir...

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
 
Stron dijo:
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
Hacer clic para expandir...

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
 
sim dijo:
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
Hacer clic para expandir...

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.
 
Stron dijo:
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.
Hacer clic para expandir...

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.
 
¿Y si cambias el order usando flex con media queries?

De esa forma podrías dejar en pantallas menores a 600 como quieres.
 
Mask7OfDragon dijo:
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
Hacer clic para expandir...

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í.
 
Última edición por un moderador:
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba