TL
Tool Lab
💰Donar
💰Donar

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Acerca de esta herramienta

El Generador de Grid CSS te permite diseñar visualmente layouts bidimensionales ajustando grid-template-columns, grid-template-rows, propiedades de separación y configuraciones de alineación. La vista previa en vivo muestra exactamente cómo quedará tu grid antes de escribir código.

CSS Grid es el sistema de layout más potente de CSS, diseñado para layouts bidimensionales (filas Y columnas simultáneamente). Complementa a Flexbox, que maneja layouts unidimensionales.

Cómo usar

  1. Establece grid-template-columns para definir la estructura de columnas. Usa los botones de preajuste para patrones comunes.
  2. Opcionalmente configura grid-template-rows (déjalo como auto para la mayoría de layouts).
  3. Ajusta column-gap y row-gap para el espaciado.
  4. Usa justify-items y align-items para controlar la colocación de elementos en las celdas.
  5. Cambia el número de elementos con el control deslizante para ver cómo responde el grid.
  6. Haz clic en Copiar para copiar el CSS generado.

Casos de uso

Los desarrolladores front-end usan CSS Grid para layouts de página, estructuras de dashboard y galerías de imágenes. Los diseñadores exportan especificaciones de grid como CSS exacto para compartir con desarrolladores. Los equipos que construyen sistemas de diseño lo usan para prototipar patrones de espaciado y columnas.

Preguntas frecuentes

  • ¿Qué significa 1fr? — fr es una unidad fraccional. 1fr significa una fracción del espacio disponible. repeat(3, 1fr) crea tres columnas iguales.
  • ¿Cuándo debo usar Grid vs Flexbox? — Usa Grid para layouts bidimensionales (filas y columnas). Usa Flexbox cuando los elementos se disponen en una sola dirección.
  • ¿CSS Grid está soportado en todos los navegadores? — Sí. CSS Grid es completamente compatible con todos los navegadores modernos desde 2017.