Generador de red CSS

CSS Grid Generator es un creador visual para CSS Grid Layout. Usted elige cuántas columnas y filas desea, elige un tamaño de pista para cada eje, establece los espacios y la alineación, y una vista previa de la cuadrícula se reorganiza en tiempo real. El CSS exacto que produce lo que ve se encuentra en un cuadro listo para copiar debajo, por lo que nunca tendrá que escribir columnas de plantilla de cuadrícula a mano ni contar unidades de fracción en su cabeza.

CSS Grid es un modelo de diseño bidimensional. A diferencia de flexbox, que coloca elementos a lo largo de un solo eje, la cuadrícula controla filas y columnas al mismo tiempo. El contenedor mantiene la estructura a través de un pequeño conjunto de propiedades: las columnas-plantilla-cuadrícula y las filas-plantilla-cuadrícula definen las pistas, el espacio agrega espacio entre ellas y los elementos de justificación, los elementos de alineación, el contenido de justificación y el contenido de alineación posicionan los elementos y las pistas. Esta herramienta expone esas propiedades en un panel y muestra el resultado inmediatamente.

El generador utiliza la función repetir() para cualquier eje con más de una pista, por lo que grid-template-columns: repetir(3, 1fr) es lo que se obtiene para una cuadrícula de tres columnas de columnas iguales en lugar de una lista repetitiva. La unidad fr representa una fracción del espacio libre en el contenedor, que es lo que hace que los diseños de la cuadrícula sean fluidos: tres columnas de 1fr toman cada una un tercio del ancho y refluyen a medida que cambia el tamaño del contenedor. También puede mezclar pistas automáticas, de contenido mínimo, de contenido máximo y de píxeles fijos desde el menú de tamaño de pista.

Todo se ejecuta completamente en su navegador. No hay registro, no se carga nada y la herramienta sigue funcionando sin conexión una vez que la página se ha cargado. Es útil como ayuda para el aprendizaje, porque puede observar cómo cada propiedad cambia el diseño y como una forma rápida de producir CSS de cuadrícula listo para producción para una galería, un panel, un diseño de tarjeta o un shell de página completo. La regla generada apunta a una clase de contenedor .grid y enumera solo las propiedades que tienen un efecto visible, por lo que la salida permanece limpia.