Zona de pruebas de CSS Grid Constructor visual de CSS Grid con controles interactivos para columnas de plantilla, filas y espacios.

🎨

Zona de pruebas de CSS Grid

Constructor visual de CSS Grid con controles interactivos para columnas de plantilla, filas y espacios.

Define la estructura de la cuadrícula

Establezca el número de columnas y filas, o ingrese valores de plantilla personalizados.

Ajustar espaciado y alineación

Controlar los espacios entre columnas y filas, y establecer justify-items y align-items.

Copiar el CSS

Previsualizar la disposición de la cuadrícula y copiar el código CSS.

Loading tool...

What Is Zona de pruebas de CSS Grid?

El CSS Grid Playground es un constructor interactivo para diseños de layout con CSS Grid, el sistema de diseño más potente en CSS. La cuadrícula proporciona control bidimensional sobre filas y columnas simultáneamente, lo que la hace ideal para diseños de página complejos. Esta herramienta ofrece dos modos: el modo automático utiliza repeat(n, 1fr) para cuadrículas de columnas iguales simples, mientras que el modo manual te permite ingresar valores de plantilla personalizados como 1fr 2fr 1fr o 200px auto 200px. Puedes controlar los espacios entre columnas y filas de forma independiente, y establecer justify-items y align-items para la alineación del contenido dentro de las celdas de la cuadrícula. La vista previa visual muestra elementos de cuadrícula coloreados para que puedas ver exactamente cómo funciona tu configuración de diseño. Esta herramienta es excelente tanto para aprender Grid como para prototipar diseños de producción.

Why Use Zona de pruebas de CSS Grid?

Modos de plantilla automática y personalizada para flexibilidad
Controles de espaciado entre columnas y filas independientes
Justify-items y align-items para alinear contenido de celdas
Previsualización visual interactiva con elementos de cuadrícula coloreados

Common Use Cases

Diseños de página

Diseñar diseños de página completos con encabezado, barra lateral, contenido y pie de página.

Galerías de imágenes

Crear galerías de imágenes responsivas con espaciado consistente.

Diseños de panel de instrumentos

Crear diseños de widgets del panel de instrumentos con áreas de cuadrícula de diferentes tamaños.

Aprender CSS Grid

Experimentar con propiedades de la cuadrícula para comprender diseños bidimensionales.

Technical Guide

CSS Grid se activa con display: grid en un contenedor. grid-template-columns define pistas de columna utilizando valores de longitud, unidades fr (fraccionarias) o funciones como repeat() y minmax(). La unidad fr distribuye el espacio disponible proporcionalmente. grid-template-rows funciona de la misma manera para las pistas de fila. gap (o row-gap y column-gap) establece el espaciado entre pistas. justify-items y align-items controlan cómo se alinea el contenido dentro de las celdas de la cuadrícula. Los elementos de la cuadrícula pueden abarcar varias celdas utilizando grid-column: span n y grid-row: span n. Las áreas de cuadrícula con nombre que utilizan grid-template-areas proporcionan una forma visual de definir diseños complejos. Las palabras clave auto-fit y auto-fill en repeat() crean diseños responsivos sin consultas de medios: repeat(auto-fit, minmax(250px, 1fr)) crea tantas columnas como quepan con un ancho mínimo.

Tips & Best Practices

1
Utilizar unidades fr para un tamaño de columna flexible y proporcional
2
Combinar minmax() con auto-fit para diseños responsivos sin consultas de medios
3
Utilizar grid-template-areas para regiones de diseño nombradas y legibles
4
Establecer espaciado en lugar de márgenes para un espaciado entre celdas consistente

Related Tools

Espacio de pruebas de CSS Flexbox

Explorador visual de CSS Flexbox con controles interactivos para todas las propiedades del contenedor flexible.

🎨 CSS & Design

Generador de tablas CSS

Crea hermosas tablas HTML con estilos personalizables, colores, franjas y efectos de desplazamiento.

🎨 CSS & Design

Generador de Columnas CSS

Crea diseños de texto con varias columnas personalizables, cuenta de columnas, espaciado y estilos de regla.

🎨 CSS & Design

Probador de Diseño Responsivo

Previsualiza sitios web en puntos de interrupción comunes de dispositivos con un visor de iframe integrado.

🎨 CSS & Design

Frequently Asked Questions

Q ¿Qué significa fr en CSS Grid?

fr es una unidad fraccionaria que distribuye el espacio disponible proporcionalmente. 1fr 2fr crea dos columnas donde la segunda es el doble de ancha.

Q ¿Cómo hago para crear una cuadrícula responsiva?

Utilizar repeat(auto-fit, minmax(250px, 1fr)) para una cuadrícula que se ajuste automáticamente a las columnas en función del ancho del contenedor.

Q ¿Pueden superponerse los elementos de la cuadrícula?

Sí, los elementos de la cuadrícula pueden ocupar las mismas celdas utilizando colocación explícita, creando diseños en capas.

Q ¿Cuándo debo utilizar Grid vs Flexbox?

Grid para diseños bidimensionales (filas y columnas). Flexbox para diseños unidimensionales (una sola fila o columna).

Q ¿Funciona CSS Grid en todos los navegadores?

CSS Grid está soportado en todos los navegadores modernos. IE11 admite una especificación de cuadrícula anterior con algunas diferencias.

About This Tool

Zona de pruebas de CSS Grid is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.