Share
En el consejo rápido de hoy, te mostraré cinco recursos para dominar el diseño de cuadrícula de CSS. Vamos a bucear en!
Grid Layout es posiblemente uno de los desarrollos más significativos para los desarrolladores web desde el nacimiento de CSS. Es un sistema de diseño específicamente para su uso con interfaces de usuario basadas en grid, lo que significa que el enfoque estándar de "flotación" (algo así como un hack, seamos honestos) ya no es necesario como medio principal para diseñar una página web.
El primer borrador de trabajo se publicó en 2011 y, créalo o no, tenemos que agradecer a Microsoft por gran parte de su desarrollo; Tres de los cuatro autores iniciales formaban parte del equipo de Microsoft. Esa versión inicial está desactualizada ahora, ya que luego fue reemplazada por el Módulo de diseño de cuadrícula CSS Nivel 1.
El soporte del navegador para Grid ya es muy prometedor, por lo que es hora de que se familiarice con la sintaxis. Aquí hay algunos grandes recursos para echarte.
El primer ejemplo viene de Mozilla. Su introducción a CSS Grid Layout cubre los conceptos básicos, pero también conceptos avanzados como las líneas de denominación. Es un recurso completo, pero también está bellamente presentado con una navegación clara, gráficos atractivos y bolígrafos con los que puede jugar y jugar..
Otro recurso completo es learncssgrid.com por 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 puede necesitar.
A continuación, nos dirigimos a CSS Tricks para un gran recurso de Chris House (en el video lo atribuyo erróneamente a Chris Coyier, me disculpo por eso). La "Guía completa de Grid" es exactamente lo que usted esperaría; muy completa Detalla las propiedades del contenedor de la cuadrícula y los elementos de la cuadrícula en columnas separadas. Impresionante trabajo, como es habitual, desde CSS Tricks..
"Rachel por ejemplo" es desarrollada y mantenida por Rachel Andrew (ella misma es miembro del grupo de trabajo para CSS Grid Layout) y ha estado presente por bastante tiempo. Además de la "guía de inicio", que le brinda toda la información esencial sobre la especificación, le brinda muchos ejemplos y patrones de "agarre y avance" para los diseños más comunes..
Si prefiere aprender por video, le recomiendo (¡obviamente!) Eche un vistazo a estos cursos de Craig Campbell. El primero (3 Proyectos de CSS Grid para diseñadores web) lo guía a través de tres proyectos de CSS Grid, con ejemplos en Codepen para que los bifurque y practique.
3 Proyectos CSS Grid para Diseñadores WebEl curso más reciente de Craig (Bringing CSS Grid Layout y Flexbox Together) explica cómo se pueden usar dos de los módulos de diseño más poderosos de CSS (Grid y Flexbox) juntos..
Reuniendo CSS Grid Layout y FlexboxEste resumen rápido te da un gran comienzo para aprender CSS Grid. Todos los recursos aquí incluyen ejemplos prácticos que puede utilizar para profundizar y reforzar la teoría. Te dejo con algunos tutoriales más, pero hasta el próximo aprendizaje, feliz!
Accentsconagua