Generador de Grid CSS
Crea layouts CSS Grid con vista previa interactiva.
haga clic en Celda para expandir
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Generador visual de layouts CSS Grid
CSS Grid Layout es el sistema de layout bidimensional más poderoso disponible en CSS. A diferencia de Flexbox, que trabaja en un solo eje (fila o columna), CSS Grid permite controlar filas y columnas simultáneamente, lo que lo hace ideal para crear layouts de página completos, galerías de imágenes, dashboards y cualquier diseño que requiera una estructura de cuadrícula precisa y predecible.
Nuestro generador visual te permite definir el número de columnas y filas, personalizar las plantillas de tamaño (grid-template-columns y grid-template-rows) usando unidades como fr, px, % o auto, ajustar los espacios entre celdas (column-gap y row-gap), y expandir celdas individuales para que ocupen múltiples columnas o filas usando grid-column: span y grid-row: span.
La vista previa se actualiza en tiempo real mostrando exactamente cómo lucirá tu grid. Haz clic en cualquier celda para seleccionarla y usar los controles de expansión para que ocupe más de una columna o fila. El código CSS generado incluye todas las propiedades necesarias para replicar el layout exacto que ves en la vista previa, listo para copiar y usar en tu proyecto.
Preguntas frecuentes
¿Qué significa la unidad "fr"?
La unidad "fr" (fracción) representa una fracción del espacio disponible en el contenedor grid. Por ejemplo, "1fr 2fr" crea dos columnas donde la segunda es el doble de ancha que la primera. Es similar a flex-grow pero más intuitivo para definir proporciones.
¿CSS Grid reemplaza a Flexbox?
No, se complementan. Grid es mejor para layouts bidimensionales (filas y columnas), mientras que Flexbox excede en layouts unidimensionales (una fila o columna). Es común usar Grid para la estructura general de la página y Flexbox para alinear contenido dentro de cada sección.
¿Cómo hago que una celda ocupe varias columnas?
En nuestra herramienta, haz clic en la celda y usa los botones "+" para expandirla. En CSS, esto se logra con "grid-column: span 2" (para 2 columnas) o "grid-row: span 2" (para 2 filas). También puedes especificar posiciones exactas con "grid-column: 1 / 3".
¿Quieres saber más? Lee nuestra guía completa →