CSS Grid Layout tras su soporte cuasi universal 4.4.17

CSS Grid Layout tras su soporte cuasi universal

Marzo (2017) llegó pegando fuerte en temas de CSS. Tal como habían anunciado los desarrolladores de los distintos navegadores. En un plazo increíblemente pequeño para lo que suele pasar los principales navegadores llegaron con nuevas versiones que traían en su seno el soporte a la especificación CSS Grid Layout.

Tal es así que en estos momentos sólo Opera Mini y el navegador nativo de Android están en rojo en Can I Use. Y ambos con una nota al respecto.

También es cierto que tanto IE11 como Edge soportan el CSS Grid Layout con prefijo privativo y una nomenclatura totalmente obsoleta y superada de cuando comenzó a elaborarse la especificación. Dicha nomenclatura quedó descartada hace mucho mucho mucho tiempo.

Los navegadores que sí soportan CSS Grid Layout sin necesidad ni de usar prefijos privativos ni tener que ser activado por el usuario son:

• Firefox 52
• Chrome 57
• Chrome for Android 57
• Safari 10.1
• iOS Safari 10.3
• Opera 43

No hace falta que yo también diga que la especificación CSS Grid Layout ya puede debe ser tenida en cuenta en entornos productivistas.

CSS Grid Layout: Lecturas y recursos al día

Y es por este soporte masivo que CSS Grid Layout ha sido el gran protagonista y acaparador durante este mes de Marzo de 2017 de todas las noticias, artículos, tuits... relativos a CSS.

Y yo aprovecho la eclosión de tanto y tan buen material nuevo sobre CSS Grid Layout para reseñar entre todo los siguientes:

A Complete Guide to CSS Grid Layout

Obra de Chris House, @chrishouse83. Realizada a semejanza de la guía de uso sobre el Flexbox que en su día publicó Chris Coyier en CSS-Tricks.

Su principal valor reside en que separa las propiedades de CSS Grid layout entre las que aplican a la caja padre que construye la rejilla y las que se han de declarar a los ítems del grid y que explica y adjunta dibujos sobre cada una de ellas.

Enlace: A Complete Guide to CSS Grid Layout.

El mismo trabajo(con crédito de autoría), pero con estética y toque de Chris Coyier la tienes en CSS-Tricks

3 CSS Grid Features That Make My Heart Flutter

Artículo de Una Kravets, @Una. Centrado en tres novedades de la especificación CSS Grid Layout:

1. named areas: identificar y asignar nombres a las áreas del grid.
2. grid-gap nunca fue tan sencillo y fácil lograr un espacio uniforme entre ítems del grid.
3. minmax() función CSS que permite declarar el tamaño (altura o anchura) máximo y mínimo de un ítem del grid.

Enlace: 3 CSS Grid Features That Make My Heart Flutter

Practical CSS Grid: Adding Grid to an Existing Design

Artículo de Eric Meyer, @Meyerweb, en A List Apart.

Describe un caso práctico de implementar y usar CSS Grid Layout en un sitio web ya existente. En este caso en la página personal del autor.

Enlace: Practical CSS Grid: Adding Grid to an Existing Design

Podcast: CSS Grid Layout (audio en español)

Entrevista en español a Manuel Rego, @regocas que le hicieren la buena gente de wecodesignpodcast.com.

Descripción del contenido según sus autores:
Manuel Rego, quien ha participado en la implementación de CSS Grid Layout nos cuenta como se ha llevado a cabo la implementación de CSS Grid Layout, como funciona y analizamos las diferentes propiedades para aprender esta nueva forma de crear webs.
Os acercamos multitud de recursos útiles que esperamos os sean útiles.

Enlace: Podcast: CSS Grid Layout. Duración: 77 minutos.

Does CSS Grid Replace Flexbox?

Artículo de Robin Rendle, @robinrendle, en CSS-Tricks.

Versa, como indica su título, sobre la posible competencia en el uso entre ambas especificaciones: CSS Grid Layout y Flexbox.

Si quieres la versión corta: no, no son excluyentes entre sí. Ambas pueden coexistir y usarse conjuntamente. Pero lo recomendable, por eso esta reseña, es que leas el aartículo.

Enlace: Does CSS Grid Replace Flexbox?

Moz://a y CSS Grid Layout

La gente de Mozilla ha estado más que ocupada con la llegada de CSS Grid Layout. No sólo en implementarlo en su navegador Firefox.

Junto a todos los recursos conocidos con anterioridad sobre el tema, han introducido novedades al respecto.

• Moz://a CSS Grid
• Cómo ver la rejilla con su inspector de código
• Guía de CSS Grid Layout en MDN por Rachel Andrew

Entre otros muchos

Grid “fallbacks” and overrides

Por Rachel Andrew, @rachelandrew

Algunas técnicas para usar conjuntamente con CSS Grid Layout y prevenir que la página no se rompa en aquellos navegadores que no lo soportan.

Enlace: Grid “fallbacks” and overrides

Grid + Flexbox: the best 1-2 punch in web layout

Artículo de Hui Jing, @hj_chen

Enlace: Grid + Flexbox: the best 1-2 punch in web layout

cssgridgarden.com

Juego por Thomas H. Park, @thomashpark

Al igual que ocurrió con el flexbox y la rana, también tienes un juego para aprender CSS Grid Layout. En este caso el juego va de plantar zanahorias y ver cómo crecen en su parcelita correspondiente. El juego conta de 24 niveles.

Enlace: cssgridgarden.com

CSS Grid Layout en EsCSS

A lo largo de estos años he ido publicando algunos artículos en el blog sobre CSS Grid Layout. Los más relevantes puedes encontrarlos bajo la etiqueta CSS Grid Layout.

Enlace: Relación de artículos CSS Grid Layout en EsCSS

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso