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, define las propiedades del contenedor y abre Ajustes para dar estilo a cada hijo: order, flex-grow, flex-shrink, flex-basis y align-self en modo Flex, o span de columna/fila y align-self en modo Grid. El modo Grid ofrece además tamaños de pista personalizados —escribe cualquier valor de grid-template-columns/rows como 200px 1fr o repeat(auto-fit, minmax(120px, 1fr))— y un editor visual de grid-template-areas donde nombras cada celda, lo que también crea líneas de cuadrícula con nombre. Una vista previa en vivo de mosaicos numerados refleja cada cambio, y puedes exportar solo la regla .container o el contenedor junto con el CSS por elemento.

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. Define las propiedades del contenedor: flex-direction/wrap y justify/align, o el número de columnas y filas con justify-items/align-items.
3. Abre Ajustes para cambiar el espaciado y el número de elementos, y para dar estilo a cada hijo (order, flex-grow/shrink/basis, align-self o span de columna/fila).
4. En Grid, cambia el tamaño de pistas a Personalizado para escribir tus propios grid-template-columns/rows: px, fr, minmax() o repeat(auto-fit/auto-fill, …).
5. Activa el editor de grid-template-areas y nombra cada celda para colocar los elementos por área.
6. Elige si exportar solo el CSS del contenedor o el contenedor más el CSS por elemento, y copia el resultado.

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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

Preguntas frecuentes

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

El modo Flex distribuye los elementos en un solo eje y expone flex-direction, flex-wrap, justify-content y align-items. El modo Grid los organiza en dos dimensiones con grid-template-columns y grid-template-rows más justify-items y align-items. Cambia de modo con el conmutador para comparar cómo gestiona cada uno la misma alineación.

¿Cómo doy estilo a elementos individuales?

Abre Ajustes y usa los controles por elemento para fijar order, flex-grow, flex-shrink, flex-basis y align-self (Flex) o span de columna/fila y align-self (Grid) en cada hijo. Pon Exportar en 'Contenedor + elementos' y la herramienta añade una regla .container > :nth-child(n) por cada elemento que personalices.

¿Puedo usar tamaños de pista personalizados como auto-fit o minmax()?

Sí. En modo Grid cambia el tamaño de pistas a Personalizado y escribe cualquier valor válido de grid-template-columns/rows: píxeles, unidades fr, minmax() o repeat(auto-fit/auto-fill, minmax(120px, 1fr)) para columnas responsivas. La vista previa y el CSS se actualizan mientras escribes.

¿Qué hace el editor de grid-template-areas?

Actívalo en modo Grid y nombra cada celda de la cuadrícula; la herramienta arma una declaración grid-template-areas y las celdas vacías se convierten en un punto. Nombrar áreas también crea líneas de cuadrícula con nombre, y puedes colocar un hijo en un área escribiendo su nombre en el campo grid-area de ese elemento.

¿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.