CSS Grid es un método cada vez más popular para crear diseños de diseño web complejos y con capacidad de respuesta que se reproducen de forma más coherente en todos los navegadores. Ahora es el momento de familiarizarse con CSS Grid, por lo que hemos recopilado 13 de las mejores maneras de comenzar a aprender hoy.
En lugar de los métodos de la vieja escuela, como las tablas o el modelo de caja, CSS Grid le permite crear diseños más asimétricos y un código más estandarizado que es compatible con todos los navegadores. La mayoría de los navegadores de sitios web ya son compatibles con CSS Grid y es una recomendación de candidato del W3C, que lo formalizaría como una práctica estándar. Se cree que CSS Grid será el futuro de los diseños de sitios web.
1. MDN: CSS Grid Layout
Mozilla tiene excelentes recursos en las guías de Documentos Web de MDN, que demuestran una explicación simple de cómo funcionan las cosas y los ejemplos de código para comenzar.
Esto es lo que dice MDN sobre la cuadrícula de CSS:
CSS Grid Layout sobresale al dividir una página en regiones principales, o definir la relación en términos de tamaño, posición y capa, entre partes de un control construido a partir de primitivos HTML.
Al igual que las tablas, el diseño de cuadrícula permite a un autor alinear elementos en columnas y filas. Sin embargo, muchos más diseños son posibles o más fáciles con la cuadrícula CSS que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse de manera que se superpongan y superpongan, de manera similar a los elementos posicionados en CSS.
La documentación ofrece código y ejemplos, además de elementos que puede abrir y jugar por su cuenta en CodePen o JSFiddle. Este podría ser el mejor punto de partida en términos de pensar en la cuadrícula de CSS.
2. Aprender CSS Grid
Learn CSS Grid es una guía para aprender la técnica de Jonathan Suh, basada en el método con el que lo aprendió. La guía está bien organizada y comienza con una tabla de contenido que le permite saltar de una sección a otra.
Esta guía es fácil de seguir (se requieren algunos conocimientos de codificación) y es un gran recurso para los principiantes de CSS grid. Cada elemento viene con un ejemplo visual, que podría ser la pieza clave para reunir toda la información.
3. Tuts + Guide to CSS Grids
Tuts + ha creado una guía completa para ayudarlo a aprender CSS Grid, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzado. Se realiza a través de una serie de tutoriales claros y completos, con ejemplos prácticos en todo.
4. Codeacademy: Introducción a Grids.
Codeacademy ha sido durante mucho tiempo uno de los mejores lugares para aprender habilidades de codificación en un formato práctico. Si bien tiene que crear una cuenta para acceder a los tutoriales, es una excelente manera de aprender a usar un formato basado en el plan de lección.
Aquí está la descripción del curso de Introducción a Grids:
En esta lección, presentamos una nueva y poderosa herramienta llamada CSS grid. La cuadrícula se puede usar para diseñar páginas web completas, mientras que Flexbox es principalmente útil para colocar elementos en un diseño unidimensional, la cuadrícula CSS es más útil para diseños bidimensionales, ya que proporciona muchas herramientas para alinear y mover elementos a través de ambas filas y columnas
El curso de Codeacademy se puede tomar en secuencia (comience desde el principio si es completamente nuevo en el diseño web de back-end) o por su cuenta. Es gratis crear una cuenta y tomar muchos de los cursos.
5. FreeCodeCamp: Aprende CSS Grid en 5 minutos
¿Sabes de qué se trata la cuadrícula CSS y solo tienes unos minutos para sumergirte realmente en ella? Este tutorial de inicio rápido de FreeCodeCamp te ayudará a familiarizarte con él en solo cinco minutos. (Por supuesto que ya necesitas saber algunos conceptos básicos).
Aquí está la conclusión: los dos ingredientes principales de una Cuadrícula de CSS son la envoltura (padre) y los elementos (hijos). El contenedor es la cuadrícula real y los elementos son el contenido dentro de la cuadrícula.
La guía de 5 minutos también incluye marcado relevante.
6. El taller de diseño de CSS
El taller de diseño de CSS es un conjunto de cursos pagados de Rachel Andrew, uno de los líderes en el trabajo de cuadrícula de CSS. Los cursos son un programa de autoaprendizaje en línea que es ideal si desea más estructura para aprender algo nuevo.
Para ver si este curso es adecuado para usted, la primera parte es gratuita. Se centra en los conceptos básicos de CSS y explica todos los elementos básicos que necesita para profundizar en el material. Lo bueno del conjunto completo de cursos es que no hay costos adicionales; solo necesitas un navegador web y un editor de texto para comenzar.
7. Juego: Grid Garden
Grid Garden es un juego que usa CSS para hacer crecer un jardín de zanahorias exitoso. Es un buen manual sobre cómo funcionan las propiedades de CSS para que usted tenga la mentalidad correcta para pensar en la cuadrícula de CSS.
Y bueno, es muy divertido. Mira si puedes superar los 28 niveles.
8. Rejilla por ejemplo
Cuadrícula por ejemplo muestra cómo se verán las diferentes configuraciones de cuadrícula CSS en los navegadores compatibles. Cada configuración de cuadrícula incluye un ejemplo visual con enlaces a páginas con más información sobre la técnica y el código.
También hay un bono divertido con diseños de página ficticios para que pueda ver cómo se ven los diferentes ejemplos de cuadrícula CSS con contenido real aplicado a ellos.
9. Video: Aprende el CSS Grid
Si aprender a ver a alguien hacer algo es más importante para ti, mira el video Learn the CSS Grid. (También tiene texto de acompañamiento.)
El video de 18 minutos es un tutorial de inicio más rápido que el fabricante espera "facilite su entusiasmo por explorar todo el potencial de la cuadrícula CSS".
El video lo guía a través de la configuración de un proyecto, la definición de HTML, la definición de algunas reglas básicas, la definición de cuadrículas, la anidación de las áreas de plantilla y cuadrícula de CSS y algunos trucos de respuesta. El video y el texto incluyen capturas de pantalla de todo el marcado.
10. CSS-Tricks: Una guía completa para Grid
CSS-Tricks ha sido durante mucho tiempo uno de los lugares para aprender sobre codificación. La Guía Completa de Grid no es una excepción.La guía, que se publicó en noviembre de 2017, es un manual actualizado sobre el sistema 2D.
Esta guía es fantástica y se divide en secciones digestibles.
Pero la mejor parte podría ser la galería de CSS grids en acción. Asegúrate de pasar algún tiempo en la galería para inspirarte.
11. CSS Grid Ask Me Anything
¿Tiene preguntas sobre la rejilla de CSS? Pregunte a un experto.
Este Git incluye preguntas simples y respuestas de Rachel Andrew. Si bien ella solo responde preguntas reducidas, todavía es bastante útil. Sólo asegúrese de seguir las reglas básicas.
12. Video: Progresando nuestros diseños
Jen Simmons comparte su charla de la Conferencia Enhance 2016 para usuarios. El video de 30 minutos recorre ejemplos de cuadrícula CSS en acción y ella explica cómo escribir código en un momento de técnicas de transición.
Mire el video y luego también puede ir a través de la plataforma de diapositivas. El par es bastante útil para pensar en la cuadrícula CSS en términos más amplios.
13. CSS Grid Playground
¿Listo para poner a prueba todas esas ideas y habilidades de CSS grilla? El CSS Grid Playground incluye el contenedor de la cuadrícula y las ubicaciones de los elementos de la cuadrícula para que pueda comenzar a codificar y ver qué sucede en tiempo real.
Es una buena manera de sentirse cómodo con lo básico y ver los cambios a medida que los realiza. (Casi se siente como un juego.)
Conclusión
Deja de procrastinar si no has dado el salto para, al menos, familiarizarte con la cuadrícula de CSS. Conviértase en el objetivo de sentirse cómodo con las mejores prácticas para que pueda comprender mejor cómo funciona y cómo usarlo.
Aquí hay un saludo a todas las personas que están proporcionando excelentes recursos sobre la cuadrícula de CSS. Debe admitir que la comunidad de diseño y desarrollo web es bastante sorprendente cuando se trata de compartir conocimientos. Si usas una de estas lecciones o tutoriales y obtienes un beneficio de ella, asegúrate de compartir el amor con el autor e informarle que te han ayudado.