Developer Tools
Design Tools
Web UtilitiesPlayground de CSS Grid
Crea diseños de cuadrícula CSS visualmente con vista previa en tiempo real, soporte de áreas de plantilla y código CSS instantáneo. Configura columnas, filas, espacios y la ubicación de elementos de forma interactiva.
Presets
Propiedades del Contenedor
Propiedades del Ítem
Vista Previa en Tiempo Real
CSS del Contenedor
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}CSS de los Ítems
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}Herramientas Relacionadas
Acerca del Playground de CSS Grid
Cómo Funciona
- Configura las propiedades del contenedor: grid-template-columns, grid-template-rows, gap, justify-items, align-items, justify-content y align-content
- Añade hasta 8 ítems de cuadrícula y posiciona cada uno con grid-column-start/end y grid-row-start/end
- Usa notación span (p. ej. span 2) o números de línea explícitos en los campos de plantilla
- Previsualiza el diseño en tiempo real — haz clic en cualquier ítem para seleccionarlo en el editor
- Aplica presets para diseños comunes como Holy Grail, Dashboard o Card Grid, y luego personaliza
- Copia el CSS generado para el contenedor y los ítems directamente en tu proyecto
Casos de Uso Comunes
- Aprender propiedades de CSS Grid de forma interactiva con retroalimentación visual instantánea
- Prototipar diseños de página: encabezados, barras laterales, dashboards, cuadrículas de tarjetas
- Depurar problemas de posicionamiento en cuadrículas ajustando números de línea visualmente
- Generar CSS de cuadrícula básico para patrones de diseño comunes
- Enseñar CSS Grid a estudiantes y colegas
Preguntas Frecuentes
¿Qué es el Playground de CSS Grid?
El Playground de CSS Grid es una herramienta interactiva que te permite configurar visualmente todas las propiedades del contenedor e ítems de CSS Grid. Los cambios se muestran instantáneamente en la vista previa en tiempo real, y el código CSS listo para usar se genera automáticamente.
¿Qué propiedades del contenedor puedo configurar?
Puedes configurar grid-template-columns, grid-template-rows, gap (o column-gap y row-gap separados), justify-items, align-items, justify-content y align-content. Todos los valores admiten cualquier sintaxis CSS válida, incluyendo unidades fr, repeat(), minmax() y auto.
¿Cómo posiciono un elemento en líneas específicas?
Selecciona el elemento usando su pestaña numerada en el panel de Propiedades del Ítem, luego establece grid-column-start, grid-column-end, grid-row-start y grid-row-end. Introduce un número para una línea de cuadrícula explícita o déjalo como 'auto' para la ubicación automática.
¿Qué son las presets y cómo se usan?
Las presets son configuraciones de cuadrícula prediseñadas para diseños comunes: 'Holy Grail' crea un diseño clásico de encabezado/nav/principal/lateral/pie, 'Sidebar + Main' construye un diseño de dos columnas con barra lateral, '3-Col Masonry' demuestra elementos con extensión, 'Dashboard' muestra un tablero de métricas de cuatro columnas, 'Blog Layout' configura un artículo típico con barra lateral, y 'Card Grid' crea un diseño de tarjetas de tres columnas.
¿Qué valores acepta grid-template-columns?
grid-template-columns acepta cualquier lista de pistas CSS válida: longitudes fijas como '200px 1fr', la función repeat() como 'repeat(3, 1fr)', minmax() como 'repeat(3, minmax(100px, 1fr))', auto-fill o auto-fit como 'repeat(auto-fill, minmax(150px, 1fr))', o líneas con nombre como '[inicio] 1fr [fin]'.
¿Cuál es la diferencia entre unidades fr y píxeles?
La unidad fr (fraccionaria) representa una fracción del espacio disponible en el contenedor de cuadrícula. '1fr 1fr 1fr' divide el espacio igualmente en tres columnas. '2fr 1fr' da a la primera columna el doble de espacio. Los valores en píxeles son fijos independientemente del tamaño del contenedor.
¿Qué hace justify-items vs justify-content?
justify-items controla cómo se alinean los elementos dentro de sus celdas a lo largo del eje en línea. justify-content controla cómo se alinea toda la cuadrícula dentro del contenedor cuando hay espacio extra. De manera similar, align-items alinea elementos dentro de sus celdas en el eje de bloque, mientras que align-content alinea toda la cuadrícula verticalmente.
¿Qué son justify-self y align-self para los ítems de cuadrícula?
justify-self anula justify-items para un solo ítem de cuadrícula, controlando su alineación en línea dentro de su celda. align-self anula align-items para un solo ítem, controlando su alineación de bloque dentro de su celda. Ambos aceptan: auto, start, end, center y stretch.
¿Cómo hago que un elemento abarque varias columnas o filas?
Establece grid-column-start y grid-column-end (o grid-row-start y grid-row-end) para crear una extensión. Por ejemplo, para abarcar de la columna 1 a la columna 3, establece inicio=1 y fin=3. Alternativamente, deja el inicio como 'auto' y establece el fin en 'span 2' para abarcar dos pistas.
¿Cuántos ítems de cuadrícula puedo añadir?
Puedes añadir hasta 8 ítems de cuadrícula. Haz clic en el botón '+ Añadir Ítem' para añadir más. Cada ítem tiene un código de color para que puedas identificarlo en el panel de configuración y en la vista previa en tiempo real.
¿Puedo usar tamaños de gap personalizados para columnas y filas?
Sí. Por defecto, un único valor de gap se aplica tanto a los canales de columna como de fila. Marca la opción 'Usar gaps personalizados de columna/fila' para establecer column-gap y row-gap de forma independiente mediante controles deslizantes separados.
¿Cómo copio el CSS generado?
Hay dos botones de copia: uno para el bloque CSS del contenedor (.grid-container) y otro para todo el CSS incluyendo las reglas de los ítems. Haz clic en cualquier botón 'Copiar CSS' para copiar el código al portapapeles.