ZenovayTools

Generador de CSS Grid

Construye diseños CSS Grid con un editor visual. Define columnas, filas, espacios y extiende celdas por áreas.

Preview (click cells to span)
12px
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
}

Cómo usar Generador de CSS Grid

  1. 1Establece el número de columnas y filas para tu diseño de cuadrícula.
  2. 2Ajusta los anchos de columna y alturas de fila usando los controles.
  3. 3Haz clic y arrastra para extender celdas a través de múltiples columnas o filas.
  4. 4Establece el espacio entre las celdas de la cuadrícula.
  5. 5Copia el código CSS Grid generado.
ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, sin aviso de cookies
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.
Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.
Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Qué es CSS Grid?▾
CSS Grid Layout es un sistema de diseño bidimensional para la web. Le permite organizar elementos en filas y columnas, lo que facilita el diseño de diseños complejos sin floats ni posicionamiento.
¿Cómo funcionan grid-template-columns y grid-template-rows?▾
grid-template-columns define el número y ancho de las columnas, mientras que grid-template-rows define el número y altura de las filas. Use unidades fr para proporciones flexibles, px para tamaños fijos o auto para dimensiones basadas en el contenido.
¿Qué es la unidad fr?▾
La unidad fr (fracción) representa una fracción del espacio disponible en el contenedor de la cuadrícula. Por ejemplo, 1fr 2fr crea dos columnas donde la segunda es el doble de ancha que la primera.
¿Cómo extiendo elementos a través de múltiples celdas?▾
Haga clic en una celda de la cuadrícula para iniciar una extensión, luego haga clic en una celda adyacente para extenderla. La herramienta genera reglas grid-column y grid-row span para el elemento seleccionado.
¿Puedo usar esta herramienta en mi teléfono?▾
Sí, el generador de CSS Grid funciona en cualquier navegador móvil moderno. Configure su diseño de cuadrícula visualmente y copie el CSS en cualquier dispositivo.
¿El CSS generado incluye marcado HTML?▾
Sí. La herramienta genera tanto los estilos CSS de cuadrícula como una estructura HTML correspondiente, para que pueda copiar un diseño de cuadrícula funcional completo directamente en su proyecto.
¿Puedo personalizar el espacio entre celdas de la cuadrícula?▾
Sí. Ajuste los valores de espacio entre filas y columnas para controlar el espaciado entre elementos de la cuadrícula. La herramienta usa la propiedad CSS gap estándar, que es compatible con todos los navegadores modernos.