Zona de pruebas de CSS Grid

Todas las herramientas

Compón visualmente plantillas, espacios y colocación de CSS Grid, y copia el CSS de diseño.

Vista previa

Haz clic en un elemento numerado de la cuadrícula para seleccionarlo y reposicionarlo.

grid-template-columns —
grid-template-rows —
CSS generado
—
—
Columnas
Filas
Espacios
16px
16px
Alineación
Elementos de la cuadrícula
Elemento 1
Ajustes predefinidos

Acerca de Zona de pruebas de CSS Grid

El Playground de CSS Grid compone diseños de cuadrícula reales de forma visual. Añade y elimina pistas de columna y fila para dar forma a grid-template-columns y grid-template-rows, establece los espacios de columna y fila, y ajusta las cuatro propiedades de alineación (justify-items, align-items, justify-content y align-content) mientras la vista previa refleja cada cambio al instante.

La colocación de elementos es donde las cuadrículas se vuelven potentes: añade elementos, haz clic en uno de la vista previa para seleccionarlo, y posiciónalo con inicio de columna, extensión de columna, inicio de fila y extensión de fila. Así es como las barras laterales, encabezados y celdas destacadas abarcan varias pistas, la técnica detrás de casi cualquier diseño de cuadrícula del mundo real.

Tres ajustes predefinidos (holy grail, panel de control y galería) cargan estructuras de página clásicas que puedes diseccionar y adaptar. Cuando el diseño esté listo, copia el CSS generado, que contiene las reglas completas del contenedor de cuadrícula y la colocación de cada elemento.

Cómo usar Zona de pruebas de CSS Grid

  1. Añade o elimina pistas de columna y fila para definir la plantilla de la cuadrícula.
  2. Establece el espacio de columna y el espacio de fila.
  3. Ajusta los controles de alineación: justify-items, align-items, justify-content y align-content.
  4. Añade elementos, haz clic en uno en la vista previa, y establece su inicio y extensión de columna/fila para colocarlo.
  5. Carga el ajuste predefinido holy grail, panel de control o galería para estudiar un diseño clásico.
  6. Copia el CSS generado en tu hoja de estilos.

Preguntas frecuentes

justify-items alinea cada elemento dentro de su propia celda de cuadrícula; justify-content alinea toda la cuadrícula dentro del contenedor cuando las pistas no lo llenan. La misma distinción se aplica verticalmente con align-items frente a align-content.

Selecciona el elemento y aumenta su extensión de columna; la salida CSS usa grid-column con un valor span. Combinado con una extensión de fila puedes construir barras de encabezado, barras laterales y celdas destacadas grandes dentro de la misma cuadrícula.

El esqueleto de página clásico: encabezado y pie de página de ancho completo con tres columnas entre ellos (navegación, contenido principal y una barra lateral). Era notoriamente complicado con floats; el ajuste predefinido muestra cómo unas pocas colocaciones de cuadrícula lo resuelven limpiamente.

Grid destaca en diseños bidimensionales donde filas y columnas deben alinearse (estructura de página, paneles de control, galerías). Flexbox es mejor para flujos unidimensionales como barras de herramientas y menús. Se combinan bien: grid para la página, flex dentro de los componentes.

Sí, es gratuito y basado en el navegador: experimenta tanto como quieras, y nada de lo que construyas sale de tu máquina.
Compartir
Herramientas relacionadas
Constructor de firmas de correo Diseña una firma HTML profesional a partir de 30 plantillas, personalízala y guárdala. Gratis
Icono a PNG Convierte Bootstrap Icons, Font Awesome y más en imágenes PNG personalizadas — gratis, en tu navegador. Gratis
Generador de iconos de app Genera un conjunto completo de iconos de app listos para publicar en la App Store y Google Play — fondos premium con degradados, mesh y patrones, creados a partir de tu logo. Gratis
Generador de favicons Crea un paquete completo de favicons a partir de un logo, un icono de fuente o un monograma — favicon.ico, PNG modernos, icono Apple touch, iconos PWA, manifiesto web y fragmento HTML. Gratis
Generador de box-shadow CSS Crea sombras CSS en capas con controles deslizantes para desplazamiento, desenfoque, extensión, color, opacidad e inset — previsualiza sobre un elemento real y copia el CSS listo al instante. Gratis
Generador de border-radius CSS Crea visualmente border-radius en CSS con vista previa en directo y copia código listo para producción. Gratis
Búsquedas populares
generador de css grid zona de pruebas css grid generador grid-template-columns generador de diseño css grid constructor grid-template-areas herramienta de gap css grid visualizador de css grid
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.
Informar de un problema

Añade esta herramienta gratuita a tu propio sitio web: copia y pega el código de abajo.