Índice
- CSS Grid es una forma completamente nueva de pensar en los diseños
- Aprende mientras juegas
- Aprende construyendo
Layoutit Grid es un generador interactivo de CSS Grid de código abierto. Te permite dibujar tus diseños y ver el código sobre la marcha. Puedes interactuar con el código, agregar o eliminar líneas de seguimiento y arrastrarlas para cambiar el tamaño, ¡y podrás ver el cambio de CSS y HTML en tiempo real!
Cuando haya terminado con un diseño, puede crear un CodePen o tomar el código para impulsar su próximo proyecto. La herramienta pone el código en primer plano, ayudándole a aprender la cuadrícula CSS mientras trabaja directamente con ella.
CSS Grid es una forma completamente nueva de pensar en los diseños
Ahora podemos crear diseños responsivos sólidos para nuestras experiencias web. Finalmente podemos aprender a diseñar con un conjunto coherente de herramientas de diseño en lugar de memorizar montones de trucos para forzar los elementos a colocarse en su posición.
Ahora bien, no estoy diciendo que un generador como este nos exima de conocer el código que escribimos. Todos deberíamos aprender cómo funcionan CSS Grid y Flexbox. Incluso si tu bastión es JavaScript, tener una base sólida en conocimientos de CSS es un poderoso aliado a la hora de comunicar tus ideas. Al compartir un prototipo de un componente, una interacción UX o incluso un algoritmo en un entorno limitado en línea, la forma en que se presenta su trabajo puede marcar una gran diferencia. La capacidad de desarrollar diseños adecuados y definir los estilos que los crean es fundamental.
Crear diseños en CSS no debería ser una tarea desalentadora. ¡CSS Grid es bastante divertido de usar! Por ejemplo, usar áreas de cuadrícula con nombre se siente como una versión artística ASCII de dibujar un diseño en una hoja de papel. Creemos el diseño de una aplicación de fotos, un feed de fotografías y las personas que aparecen en ellas, una al lado de la otra para su contenido principal y el típico encabezado, pie de página y una barra lateral de configuración.
.photos-app { /* For our app layout, lets place things in a grid */ display: grid; /* We want 3 columns and 3 rows, and these are the responsive track sizes using `fr` (fraction of the remaining space) */ grid-template-columns: 20% 1fr 1fr; grid-template-rows: 0.5fr 1.7fr 0.3fr; /* Let's separate our tracks a bit */ gap: 1em; /* We now have 3x3 cells, here is where each section is placed */ grid-template-areas: "header header header" /* a header stretching in the top row */ "config photos people" /* a left sidebar, and our app content */ "footer footer footer"; /* and a footer along the bottom row */}.the-header { /* In each section, let's define the name we use to refence the area */ grid-area: "header";}Este es sólo un pequeño subconjunto de lo que puedes crear con CSS Grid. La especificación es bastante flexible. Las áreas también se pueden colocar directamente usando números de línea o nombres, o el navegador puede colocarlas implícitamente, con el contenido distribuido dentro de la cuadrícula automáticamente. Y la especificación continúa creciendo con adiciones, como la subcuadrícula. Solucion de crucigramas
Al mismo tiempo, trabajar con cuadrículas puede resultar difícil, como cualquier cosa que requiera una nueva forma de pensar. Se necesita mucho tiempo para entender este tipo de cosas. Y una manera de ayudar a lograrlo es...
Aprende mientras juegas
Cuando aprendes CSS Grid, es fácil sentirte intimidado por su notación y semántica. Hasta que desarrolle algo de memoria muscular, iniciar el proceso de aprendizaje con herramientas visuales e interactivas puede ser una excelente manera de superar esa inquietud inicial. Muchos de nosotros hemos usado generadores mientras aprendíamos a crear sombras, degradados, tablas de Markdown, etc. Los generadores, si se construyen con cuidado, son excelentes ayudas para el aprendizaje.
Usemos Layoutit Grid para recrear el mismo diseño en nuestro ejemplo.
Abrir cuadrícula de diseño
Generadores como este no están hechos para depender de ellos para siempre; son un trampolín. Este en particular te ayuda a experimentar el poder de CSS Grid al materializar tus diseños en unos pocos clics junto con el código para hacerlo realidad. Esto le brinda las primeras victorias que necesita para seguir adelante con el proceso de aprendizaje. Para algunos de nosotros, los generadores permanecen permanentemente en nuestras cajas de herramientas. No porque no sepamos cómo crear los diseños a mano, sino porque tener el circuito de retroalimentación visual nos ayuda a convertir rápidamente nuestras ideas en código. Entonces seguimos jugando con ellos.
Sarah Drasner también ha creado un generador CSS Grid que también vale la pena revisar.
Aprende construyendo
Leniolabs recientemente abrió Layoutit Grid y agregó nuevas funciones, como vistas de código interactivas, edición de área, historial y soporte fuera de línea. Y hay varios más en proceso.
Ver en GitHub
Si tienes ideas para mejorar la herramienta, ¡ponte en contacto! Abra un problema y analicémoslo en GitHub. Al entrar en territorio meta, también puede obtener información sobre la especificación CSS Grid ayudándonos a crear la herramienta.
Usamos la aplicación para realizar un seguimiento de las mejores prácticas en la creación de experiencias web interactivas de alto rendimiento. Ahora funciona con el Vue 3 recientemente lanzado que utiliza componentes de configuración de script y está construido con Vite, una nueva herramienta de desarrollo que no incluye la aplicación durante el desarrollo, lo que nos brinda retroalimentación instantánea durante el desarrollo. Si tienes curiosidad y quieres construir con nosotros, ¡bifurca el repositorio y aprendamos juntos!
Tal vez te puede interesar:
- ¿Cómo se hace el tamaño máximo de fuente en CSS?
- Cambiar el tamaño de los valores en pasos en CSS
- ¿Qué hace “revertir” en CSS?
- CSS4 es una mala idea
Layoutit Grid: aprender CSS Grid visualmente con un generador
CSS Grid es una forma completamente nueva de pensar en los diseñosAprende mientras juegasAprende construyendoTal vez te puede interesar:Índice
programar
es
https://aprendeprogramando.es/static/images/programar-layoutit-grid-aprender-css-grid-visualmente-con-un-generador-1784-0.jpg
2024-11-27
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente