Limitaciones de CSS Grid para diseños complejos

  • Autor Usuario eliminado 27864
  • 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).jpg

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

Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
24 Feb 2014
Mensajes
2.443
probaste con flexbox grid?

Flexbox Grid

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

Stron

Eta
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
11 Oct 2015
Mensajes
1.271
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
 
U

Usuario eliminado 27864

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

Eta
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
11 Oct 2015
Mensajes
1.271
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.
 
U

Usuario eliminado 27864

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

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
25 Dic 2014
Mensajes
1.765
¿Y si cambias el order usando flex con media queries?

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

Usuario eliminado 27864

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í.
 
Última edición por un moderador:

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba