Laboratorio de Flexbox y Grid CSS

¿Qué es Laboratorio de Flexbox y Grid CSS?

El laboratorio de Flexbox y Grid CSS es un entorno visual gratuito para aprender y prototipar los dos principales modelos de maquetación de CSS, pensado para desarrolladores front-end, estudiantes y diseñadores. Elige Flex o Grid con el conmutador de modo y luego define las propiedades del contenedor con sencillos menús desplegables y campos numéricos: en modo Flex controlas flex-direction, flex-wrap, justify-content y align-items; en modo Grid indicas cuántas columnas y filas (representadas como repeat(n, 1fr)) además de justify-items y align-items. El espaciado y el número de elementos se aplican a ambos. Una vista previa en vivo de mosaicos numerados muestra exactamente cómo se comportan tu alineación y tu espaciado, y se genera la regla .container completa para que la copies. Úsalo siempre que quieras ver cómo queda realmente un ajuste de flex o grid antes de pegarlo en tu proyecto.

Cómo usar Laboratorio de Flexbox y Grid CSS

1. Elige Flex o Grid con el conmutador de modo para decidir qué modelo de maquetación construir.
2. En modo Flex, define flex-direction, flex-wrap, justify-content y align-items desde los desplegables.
3. En modo Grid, define el número de columnas y filas, además de justify-items y align-items.
4. Abre Ajustes para cambiar el espaciado (en px) y el número de elementos que se muestran en la vista previa.
5. Observa cómo la vista previa de mosaicos se reordena al cambiar cada propiedad.
6. Copia la regla .container generada y pégala en tu hoja de estilos.

Ejemplos

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Preguntas frecuentes

¿Cuál es la diferencia entre Flexbox y Grid aquí?

El modo Flex distribuye los elementos a lo largo de un solo eje y expone flex-direction, flex-wrap, justify-content y align-items. El modo Grid organiza los elementos en una cuadrícula bidimensional con grid-template-columns y grid-template-rows (escritas como repeat(n, 1fr)) junto con justify-items y align-items. Cambia de modo con el conmutador para comparar cómo gestiona cada modelo la misma alineación.

¿Qué hace el valor de espaciado?

El espaciado define, en píxeles, el hueco entre cada elemento tanto en Flex como en Grid mediante la propiedad CSS gap. Súbelo para separar los mosaicos o ponlo en 0 para una maquetación pegada; la vista previa y el CSS generado se actualizan al instante.

¿Por qué justify-content y align-items se escriben distinto en Grid?

Grid usa las palabras clave start, end, center y stretch para justify-items y align-items, mientras que Flex usa flex-start y flex-end. La herramienta genera las palabras clave correctas según el modo en el que estés, así que el CSS copiado siempre es válido.

¿Puedo cambiar cuántos elementos se muestran?

Sí. Abre Ajustes y cambia el número de elementos para añadir o quitar los mosaicos numerados de la vista previa (hasta 24). Esto solo afecta a la demostración en pantalla; el CSS generado describe el contenedor, no los elementos en sí.

¿Se suben mis datos a algún sitio?

No. El laboratorio se ejecuta por completo en tu navegador con JavaScript, así que tus ajustes y el CSS generado nunca se envían a un servidor. Funciona de forma privada e incluso sin conexión una vez cargada la página.