Spanish (Español) translation by Carlos (you can also view the original English article)
En el consejo rápido de hoy, te mostraré cinco recursos para dominar el diseño con CSS Grid. ¡Empecemos ahora mismo!
Una introducción rápida al sistema de cuadrículas
El diseño con cuadrículas o rejillas es posiblemente uno de los desarrollos más significativos para los desarrolladores web desde el nacimiento de CSS. Es un sistema de diseño para ser utilizado específicamente con interfaces de usuario basadas en cuadrículas, lo que significa que el enfoque estándar «flotante» (algo así como un truco, para ser honestos) ya no es necesario como medio principal para diseñar una página web.
El primer borrador de trabajo fue publicado en 2011, y, lo creas o no, tenemos que agradecer a Microsoft gran parte de su desarrollo; tres de los cuatro autores iniciales formaban parte del equipo de Microsoft. Esa versión inicial ahora está desactualizada, pues desde entonces ha sido reemplazada por CSS Grid Layout Module Level 1.
5 recursos útiles
La compatibilidad del sistema de cuadrículas con los navegadores es ya muy prometedor, así que es momento para que te familiarices con la sintaxis. Aquí hay algunos excelentes recursos para que inicies.
Mozilla: Introducción al diseño con CSS Grid
El primer ejemplo viene de Mozilla. Es una introducción al diseño con CSS Grid cubriendo lo básico, pero también conceptos avanzados como el de nombrar las líneas. Es un recurso completo, pero también está presentado de una manera hermosa con una navegación clara, gráficos atractivos y «pens» que puedes bifurcar (fork) y con los que puedes experimentar.
learncssgrid.com
Otro recurso completo es learncssgrid.com de Jonathan Suh. Explica la teoría detrás de la sintaxis, mientras que también muestra ejemplos de algunos de los patrones de diseño más comunes que podrías necesitar.
CSS Tricks: Una guía completa de la cuadrícula
A continuación vayamos a CSS Tricks por un excelente recurso de Chris House (en el video erróneamente se lo acredité a Chris Coyier, disculpas por eso). “Complete Guide to Grid” es exactamente lo que esperas; muy completa. Detalla las propiedades del contenedor de la cuadrícula (grid container) y los elementos de la cuadrícula (grid items) en columnas separadas. Como siempre, un trabajo impresionante de CSS Tricks.
Grid by Example
“Grid by Example” es desarrollado y mantenido por Rachel Andrew (ella es miembro del grupo de trabajo de CSS Grid Layout) y existe desde hace bastante tiempo. Además de la «guía de inicio», que te brinda toda la información esencial acerca de la especificación, te ofrece muchos ejemplos y patrones «listos para usar» de los diseños más comunes.
Cursos de CSS Grid en Envato Tuts+
Si prefieres aprender con videos, te recomiendo ampliamente (¡obviamente!) que les eches un vistazo a estos cursos de Craig Campbell. El primero (3 proyectos con CSS Grid para diseñadores web) te explica paso a paso tres proyectos con CSS Grid, con ejemplos en Codepen para que puedas bifurcarlos (fork) y practicar.
El curso más reciente de Craig (Uniendo CSS Grid Layout con Flexbox) explica cómo puedes usar, en conjunto, dos de los módulos de diseño más poderosos de CSS (Grid y Flexbox).
¡Ponte en marcha y aprende!
Este resumen rápido es un excelente inicio para aprender CSS Grid. Todos los recursos aquí presentados incluyen ejemplos prácticos que puedes usar para profundizar y reforzar la teoría. Te dejo con unos cuantos tutoriales más, hasta la próxima, ¡feliz aprendizaje!
By
