Grid layout: Lidiando con una solucion y sus problemas

Poco tiempo atras leí que (por fin) todos o al menos casi todos los navegadores ya ‘soportaban’ grid layout! Lo primero que pensé fue “oh god aleluya! no más hacks sucios para llegar al layout que buscamos” porque, si nos ponemos a pensar de eso se trató css desde su nacimiento: darles vueltas innecesarias a atributos que no fueron pensados para realizar hacer lo que buscamos. Un claro ejemplo son los floats, benditos y malditos a la vez. Los floats fueron creados originalmente para posicionar imagenes u otros elementos en un contenedor con texto pero se terminó usando para crear layouts y frameworks de layouts (!!!) grandes estructuras de floats y clearfixing everywhere, era un desastre, pero bueno, es lo que había. Tambien podrías armar estrucutras con inline-blocks o con flexbox pero volvemos a lo mismo ¡no fueron pensados para esto! Pero con CSS GRID LAYOUT, ¡esto al fin se solucionaría! Es todo lo que a CSS le hacia falta.

css en un gif

Volviendo a la idea del post, siempre tuve una duda/miedo cuando se estandariza una nueva tecnología para todos los navegadores: ¿Cuál es el momento ideal para utilizarlo sin miedo? Si con floats, flexbox y demas llegás al layout ideal y tenes la seguridad de que van a funcionar en mas navegadores sin problemas ya que esta tecnología funciona solo en las ultimas versiones de los navegadores, ¿hasta que punto vale la pena llenarte de fallbacks para algo que solo va a funcionar (por lo menos por ahora) en unos pocos usuarios?.

Peeeeero despues de ver varias charlas y leer varios articulos pienso que con grid podemos tener menos miedo por estos motivos:

  • Internet explorer no existe más (lágrima de felicidad)
  • Edge, quien pudo haber heredado los males del padre y ser el nuevo problema, fue el primero en implementar grid (de forma parcial y con falencias, pero lo hizo)
  • Firefox se actualiza automaticamente, como Chrome
  • Opera no se usa mucho en mi mercado pero opera ❤ CSS por varias razones

Pero igual, a no olvidar los fallbacks y prefixes!