Generador de CSS Grid
Constructor visual de diseños CSS Grid con generación de código
Ajustes de disposición
Disposiciones predefinidas
Ubicación por elemento
Seleccione un elemento en la vista previa o en la lista para editar sus propiedades.
Referencia rápida de CSS Grid
Pistas de la cuadrícula
Use unidades fr para pistas flexibles, px/% para pistas fijas y auto para pistas cuyo tamaño se ajuste al contenido.
Función repeat()
repeat(3, 1fr) es la forma abreviada de 1fr 1fr 1fr. Use auto-fill o auto-fit para cuadrículas adaptables.
Elementos que abarcan varias pistas
Use span N para abarcar N pistas, o 1 / -1 para abarcar todas las columnas/filas.
Vista previa en tiempo real
Las etiquetas de línea muestran las primeras 200 pistas. Se conservan todo su CSS y la disposición completa.
CSS generado
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}Cambie los ajustes o seleccione un elemento. La vista previa y el CSS se actualizan juntos.
Acerca del generador de CSS Grid
El generador de CSS Grid es una herramienta visual e interactiva para diseñar y generar diseños CSS Grid. CSS Grid Layout es el sistema de maquetación bidimensional más potente disponible en CSS y permite definir columnas y filas al mismo tiempo. Esta herramienta ofrece un enfoque práctico para aprender, experimentar y generar código CSS Grid listo para producción.
Características principales
- Control total de grid-template-columns y grid-template-rows con entrada libre
- Botones rápidos de columnas y filas para prototipar con rapidez usando pistas iguales
- Controles deslizantes independientes de row-gap y column-gap para controlar con precisión el espaciado
- Controles de alineación justify-items y align-items
- Ubicación de grid-column y grid-row por elemento, con botones de valores rápidos
- Etiquetas personalizadas para los elementos de la cuadrícula, para visualizar regiones semánticas del diseño
- Elementos numerados en colores pastel con indicadores del número de línea de la cuadrícula
- Diseños predefinidos: Diseño de blog, Panel de control, Galería de fotos y Página de destino
- Código CSS generado automáticamente con copia en un clic
- Compatibilidad total con modo oscuro
Cómo entender CSS Grid
CSS Grid funciona definiendo un contenedor de cuadrícula con pistas explícitas o implícitas (columnas y filas). Los elementos colocados dentro del contenedor se ubican automáticamente en celdas, o puede situarlos de forma explícita con las propiedades grid-column y grid-row para que abarquen varias pistas. La unidad fr representa una fracción del espacio disponible, lo que simplifica los diseños adaptables. La función repeat() simplifica las definiciones repetitivas de pistas, y funciones como minmax() y auto-fill/auto-fit permiten crear cuadrículas realmente adaptables sin media queries.
Patrones de diseño habituales con CSS Grid
CSS Grid es ideal para diseños a nivel de página, como blogs con regiones de encabezado, barra lateral, contenido y pie de página; interfaces de panel de control con navegación, contenido principal y áreas de widgets; galerías de fotos con elementos que abarcan varias filas y columnas para lograr un efecto tipo masonry; y páginas de destino con secciones hero de ancho completo, cuadrículas de características en varias columnas y áreas de llamada a la acción. Use los botones de plantillas para explorar al instante estos patrones.
Grid frente a Flexbox
Mientras que Flexbox está pensado para diseños unidimensionales (una sola fila o columna), CSS Grid destaca en diseños bidimensionales donde se necesita controlar ambos ejes a la vez. Grid es lo mejor para estructuras de página y disposiciones complejas de componentes, mientras que Flexbox es ideal para repartir el espacio entre elementos en una sola línea. Muchos diseños modernos usan ambos a la vez: Grid para la estructura general de la página y Flexbox para la alineación a nivel de componente.
¿Para quién es esta herramienta?
- Desarrolladores web que crean diseños de página con CSS Grid
- Ingenieros de frontend que prototipan sistemas de cuadrícula adaptables
- Diseñadores UI/UX que visualizan estructuras de cuadrícula antes de implementarlas
- Estudiantes que aprenden técnicas de maquetación CSS bidimensional
- Docentes que enseñan conceptos de CSS Grid en talleres o clases
- Cualquier persona que necesite generar rápidamente código CSS Grid para sus proyectos web