Generadores online de grillas con CSS

Cómo crear grillas o cuadrículas con CSS para tu diseño web

Las grillas con CSS son una herramienta específica para crear cualquier diseño web que se te ocurra, desde el más simple hasta el más complejo. Hoy en día, es ampliamente compatible con todos los principales navegadores: está claro que realizar diseños con divs flotantes se han ido para siempre.
Hay muchos recursos que te ayudarán a comenzar de inmediato con los diseños de codificación utilizando un editor visual, hay varias opciones interesantes en línea que pueden probar.

Aquí hay cinco herramientas CSS en línea con excelentes interfaces visuales que voy a poner a prueba. La idea es: ¡diseñá tus diseños basados ​​en CSS Grid con unos pocos clics, descargá el código y ejecútalo!

1 – CSS Grid Generator

CSS Grid Generator es un nuevo y brillante generador codificado por Sarah Drasner. La interfaz es súper elegante y puedes armar un diseño básico de CSS Grid en muy poco tiempo.

Así describe su autora al proyecto de CSS Grid: «Puedes introducir el número y unidades de tus columnas y filas, y yo generaré el código de CSS Grid para ti! Arrastra dentro de las cajas para generar divs dentro de la cuadrícula.

Aunque este proyecto puede generar un diseño básico por ti, no es un tour completo de las caracteríticas de CSS Grid sino una forma rápida de probar rápidamente sus capacidades.»

2 – LayoutIt

LayoutIt es bastante intuitivo y tiene algunas características más que CSS Grid Generator.Por ejemplo, te permite establecer la propiedad grid-gap en px, em y % unidades, y establecer grid-template-columns y grid-template-rows usando minmax ().Sin embargo, esto no es suficiente para garantizar un óptimo diseño responsive, por lo que aún deberás ajustar sus valores mediante consultas media queries.

3 – Griddy

Con Griddy puedes establecer el número de columnas y filas con fr, px, % y unidades automáticas, pero no hay una función minmax (). Puedes agregar espacios a tus columnas y filas utilizando px y % y establecer propiedades de justify-items y align-items para alinear elementos dentro de la cuadrícula. Necesitarás también ajustar el diseño responsive con media queries.

4 – CSS Grid Layout Generator

CSS Grid Layout Generator es un generador de cuadrículas CSS con todas las funciones, realizado por Dmitrii Bykov. Para comenzar, puedes ver el video de introducción, que te brinda una breve descripción de las capacidades de la herramienta en acción.

La herramienta pone a disposición toneladas de configuraciones, tanto para el contenedor Grid como para los elementos Grid. Las características disponibles incluyen:

• Puedes configurar la cuadrícula en línea
• Puedes establecer el número de columnas y filas usando fr, px, em, rem, vw, vh,%, min-content, max-content e incluso usar minmax () con repeat (), auto-fit y auto-fill. Esto significa que tu diseño puede configurarse de forma responsive de manera inmediata
• Todas las unidades están disponibles al configurar la propiedad de espacio de rejilla
• Puedes alinear el contenido de tu página configurando elementos de justificación, elementos de alineación, contenido de justificación, contenido de alineación y muchas opciones más

Los generadores de CSS Grid pueden ser útiles si estás buscando una forma de crear un diseño web básico de CSS Grid rápidamente utilizando alguna herramienta visual, aunque hay que tener en cuenta que no todas las funciones de CSS Grid suelen estar disponibles a través de estas herramientas.