Generador de cuadrícula CSS: diseño de cuadrícula visual en línea

Columns:

Rows:

Gap:

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Cómo usar Generador de cuadrícula CSS

Establezca columnas y filas: recuento y tamaños (fr para flexible, px para fijo).
Ajuste el espacio: espaciado integrado de la cuadrícula entre todas las pistas.
Vista previa de la estructura: los elementos llenan las celdas en el orden de origen.
Copia el CSS del contenedor y agrega reglas de extensión por elemento para las celdas que deben estirarse.

¿Cuál es Generador de cuadrícula CSS?

Un generador de cuadrícula CSS crea diseños bidimensionales visualmente: elija el número de columnas y filas, dimensione (la unidad fr, píxeles fijos o mezclas), establezca el espacio, obtenga una vista previa del resultado y copie la pantalla : cuadrícula; grid-template-columns: … CSS.

Grid es el sistema de CSS para diseños que se alinean en ambas dimensiones: andamios de páginas, paneles, galerías de imágenes, diseños de formularios. Su sintaxis es compacta pero abstracta (grid-template-columns: 250px 1fr 1fr describe una barra lateral más dos columnas en cinco tokens); el generador hace visible la abstracción antes de enviarla a una hoja de estilo.

Sobre el Generador de cuadrícula CSS

Establezca sus columnas y filas, dimensione las pistas, ajuste el espacio y copie el CSS generado para el contenedor.

Fluidez en el tamaño de las pistas, rápidamente: 1fr 1fr 1fr son tres columnas flexibles iguales; 250px 1fr es el clásico shell de contenido fluido de barra lateral fija; repeat(3, 1fr) abrevia pistas iguales; y la joya de la corona repeat(auto-fit, minmax(250px, 1fr)) crea una cuadrícula de tarjetas responsiva (tantas columnas de ≥250 px como quepan, sin consultas de medios), la receta de cuadrícula más copiada que existe.

La biblioteca de patrones que acelera: galerías de fotos (cuadrículas de ajuste automático), paneles de tablero (áreas explícitas), formularios con columnas de etiquetas/campos alineadas y el shell de página del santo grial (encabezado) que abarca todas las columnas, barra lateral, principal, pie de página) que los sistemas de diseño persiguieron durante dos décadas y Grid distribuye en seis líneas. Los elementos se colocan automáticamente en el orden de origen; spanning (un elemento que cubre varias pistas) agrega grid-column: span 2 por elemento.

Preguntas Frecuentes

Una fracción del espacio libre: 1fr 2fr divide el ancho sobrante en un tercio o dos tercios después de colocar las vías fijas. Es la unidad flexible nativa de Grid; prefiérala a los porcentajes, que ignoran las brechas.

La cuadrícula responsiva de una sola línea: ajuste tantas columnas de al menos 250 px como lo permita el contenedor, estírelas por igual, redistribuya al cambiar el tamaño: diseños de tarjetas sin una sola consulta de medios.

En el elemento: columna-cuadrícula: tramo 2 (o líneas explícitas: columna-cuadrícula: 1/3). Las filas funcionan igual con grid-row. La extensión es CSS por elemento encima de la plantilla del contenedor.

Cuadrícula cuando las tarjetas deben alinearse en filas Y columnas estrictas (alturas iguales, celosía limpia); Flexbox con envoltura cuando las tarjetas pueden tener un tamaño independiente. La receta de ajuste automático convirtió a Grid en la respuesta predeterminada para las galerías.

pantalla:cuadrícula; columnas-plantilla-cuadrícula: 250px 1fr; brecha: 24px - barra lateral fija, fluido principal. Agregue filas de plantilla de cuadrícula y un encabezado que abarque ambas columnas (columna de cuadrícula: 1 / -1) para el shell de página completa.