Aprende cómo funcionan las propiedades de CSS Grid con Griddy.io

Si te mantienes al día con la tecnología de diseño web, deberías conocer las grillas de CSS. Estas propiedades son Nuevas incorporaciones al formato CSS3. y se están convirtiendo rápidamente en el mejor amigo de un desarrollador.

Recientemente cubrimos un juego divertido para ayudarte a aprender las propiedades de la cuadrícula de CSS, pero los juegos no siempre enseñan ideas prácticas. Ahí es donde Griddy podría ser más útil..

Esta aplicación web gratuita te permite Personaliza las grillas en tiempo real y actualiza fragmentos en vivo. en la pagina. Puede meterse con su propia cuadrícula personalizada definiendo columnas, canales y márgenes, y reestructurando la página para aprender cómo funcionan las propiedades de la cuadrícula.

Griddy es en realidad un Herramienta de aprendizaje gratuita hecha para desarrolladores frontend. ¿Quién quiere entender más sobre las redes CSS?.

Con esta aplicación web puede agregar nuevos elementos a la cuadrícula, eliminar otros elementos y cambiar su tamaño para que se ajuste al diseño que desee..

La aplicación web tiene diferentes secciones con diferentes campos de entrada para editar las propiedades de la cuadrícula. Estos le permiten reformatear las filas / columnas de la cuadrícula y le enseñan exactamente lo que estás haciendo en el camino.

Puede definir espacios en las columnas, alinear elementos de la cuadrícula y jugar con configuraciones de justificación, todo a través de estos campos de formulario. Cada vez que realice un cambio, se actualizará automáticamente la vista previa y el pequeño fragmento de código debajo..

De esta manera, puedes copiar y pegar el CSS en tu propia hoja de estilo si quieres meterte más con él. Muy genial!

Es posible que Griddy no sea tan divertido como Grid Garden, pero Griddy es una forma práctica de aprender y entender visualmente Cómo afectan las propiedades de la grilla CSS a los elementos de la página..

Para jugar con él simplemente visita la página de inicio de Griddy. También puede compartir sus pensamientos o preguntas con el creador en Twitter @drewisthe.