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. Puede interactuar con el código, agregar o eliminar líneas de seguimiento y arrastrarlas para cambiar el tamaño, ¡y puede ver el cambio de CSS y HTML en tiempo real!
Agregue algunas pistas y vea cómo están hechas en CSS
Cuando haya terminado con un diseño, puede crear un CodePen o tomar el código para iniciar su próximo proyecto. La herramienta trae el código a la vanguardia, ayudándole a aprender la cuadrícula CSS mientras trabaja directamente con ella.
CSS Grid es una forma completamente nueva de pensar sobre los diseños
Ahora podemos crear diseños sólidos y receptivos 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 en su posición.
Ahora, 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 su fortaleza es JavaScript, tener una base sólida en el conocimiento de CSS es un poderoso aliado a la hora de comunicar sus 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 abrumadora. CSS Grid es bastante divertido de usar. Por ejemplo, el uso de á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 fotos y las personas que aparecen en ellas una al lado de la otra para su contenido principal y el encabezado, pie de página y una barra lateral de configuración típicos.
.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";
}Esto es solo un pequeño subconjunto de lo que puede construir con CSS Grid. La especificación es bastante flexible. Las áreas también se pueden ubicar directamente usando números de línea o nombres, o pueden ser ubicadas implícitamente por el navegador, con el contenido distribuido dentro de la cuadrícula automáticamente. Y la especificación continúa creciendo con adiciones, como subcuadrícula.
Al mismo tiempo, trabajar con cuadrículas puede resultar difícil, como cualquier otra cosa que requiera una nueva forma de pensar. Se necesita mucho tiempo para comprender este tipo de cosas. Y una forma de ayudar a lograrlo es …
Aprende jugando
Cuando está aprendiendo CSS Grid, es fácil sentirse intimidado por su notación y semántica. Hasta que desarrolle algo de memoria muscular para ello, 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 Layoutit Grid
Los generadores como este no están hechos para depender de ellos para siempre; son un trampolín. Este en particular le ayuda a experimentar el poder de CSS Grid al materializar sus diseños en unos pocos clics junto con el código para que esto suceda. Esto le brinda las primeras ganancias 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 ciclo de retroalimentación visual nos ayuda a convertir rápidamente nuestras ideas en código. Así que seguimos jugando con ellos.
Sarah Drasner también ha creado un generador de cuadrícula CSS que también vale la pena echarle un vistazo.
Aprende construyendo
Leniolabs recientemente abrió Layoutit Grid y agregó nuevas funciones, como vistas de código interactivo, 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 hablemos de él en GitHub. Al entrar en el meta territorio, también puede aprender sobre la especificación CSS Grid ayudándonos a construir la herramienta.
Usamos la aplicación para realizar un seguimiento de las mejores prácticas en la creación performante experiencias web interactivas. Ahora funciona con el Vue 3 recién lanzado que usa componentes de