Playground de CSS Grid

Una herramienta interactiva para experimentar con las propiedades de CSS Grid y ver los efectos en tiempo real. Ajusta la configuración del layout de grid y genera automáticamente código Pure CSS, Tailwind CSS y SCSS.

Cómo usar

Establece el número de columnas y filas para definir la estructura básica del grid

Ajusta los espacios (gaps) para afinar el diseño

Añade o elimina elementos para ver la vista previa

Configura la posición y tamaño de elementos individuales

Copia el código CSS, Tailwind o SCSS generado

Características principales

Vista previa en tiempo real

Soporte para todas las propiedades de CSS Grid

Generación de código Pure CSS, Tailwind CSS y SCSS

Adición y eliminación dinámica de elementos del grid

Controles intuitivos con cajas de selección

Vista previa responsiva

Propiedades del Contenedor Grid

Columnas:

Filas:

Elemento Seleccionado

Elemento 1

Grid Column

Current: auto

Grid Row

Current: auto

Align Self

Justify Self

auto

Controls horizontal positioning within the grid cell

Align Self

auto

Controls vertical positioning within the grid cell

Propiedades del Contenedor Grid

Espacio entre Columnas (px)

8px

0pxTight50px

Espacio entre Filas (px)

8px

0pxTight50px

Align Items

Justify Items

stretch

Default horizontal alignment for all grid items

Align Items

stretch

Default vertical alignment for all grid items

Vista Previa

3×3 grid

Elemento 1

Elemento 2

Elemento 3

Código Generado

Pure CSS

/* Grid Container Styles */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  grid-auto-flow: row;
}

/* Grid Item Styles */
.grid-item-1 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-2 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-3 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

Preguntas Frecuentes (FAQ)

CSS Grid es un potente sistema de diseño bidimensional que permite organizar elementos usando filas y columnas. Es perfecto para crear diseños complejos con facilidad.

Flexbox es ideal para diseños unidimensionales (fila o columna), mientras que CSS Grid destaca en diseños bidimensionales (filas y columnas). Elige según tus necesidades de diseño.

Sí, el código generado se puede usar directamente en tus sitios web o aplicaciones. Puedes elegir entre formatos Pure CSS, Tailwind CSS o SCSS.

Puedes personalizar la colocación libremente estableciendo propiedades individuales de grid-column y grid-row para cada elemento del grid.

La vista previa es responsiva, pero para la implementación real de diseño responsivo, necesitarás usar media queries para aplicar diferentes configuraciones de grid para diferentes breakpoints.