Configura y previsualiza maquetaciones CSS Flexbox y Grid visualmente, visualiza animaciones y copia el código CSS.
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>Configura y previsualiza maquetaciones CSS Flexbox y Grid visualmente, visualiza animaciones y copia el código CSS. Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
Esta herramienta te permite crear maquetaciones con Flexbox o CSS Grid desde menús, sin memorizar la sintaxis. Arriba eliges entre Modo Flexbox y Modo CSS Grid, defines de 1 a 12 elementos con los botones de más y menos y seleccionas las propiedades. La vista previa aplica cada cambio al instante y debajo aparecen el CSS del contenedor y la estructura HTML correspondiente, cada uno con su botón de copiar. La salida por defecto es .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; }
El modo Flexbox incluye flex-direction (row, row-reverse, column, column-reverse), justify-content para el eje principal (con space-between, space-around y space-evenly), align-items para el eje transversal (con stretch y baseline) y flex-wrap. Recuerda que el eje principal sigue a la dirección: con flex-direction: column, justify-content controla la posición vertical y align-items la horizontal. Cuando los elementos no caben, nowrap los aprieta en una sola línea y solo wrap los hace pasar a la siguiente.
El modo Grid ofrece plantillas de columnas habituales: columnas iguales de repeat(2, 1fr) a repeat(4, 1fr), una columna central más ancha con 1fr 2fr 1fr y la versión adaptable repeat(auto-fit, minmax(100px, 1fr)), que coloca tantas columnas como quepan en el ancho del contenedor. Las filas pueden ser auto, repeat(2, 80px) o 1fr 1fr, y justify-items y align-items sitúan cada elemento dentro de su celda en horizontal y vertical. Ambos modos comparten el control de espaciado gap (0 a 40 px), que separa filas y columnas a la vez y resulta más limpio que añadir márgenes a cada elemento.
El código generado contiene solo las reglas de maquetación de .container y la estructura HTML de .item; los colores, tamaños y rellenos de los elementos los defines tú según tu diseño. Una regla sencilla: usa Flexbox para disposiciones en una dimensión, como una fila de botones, una barra de navegación o centrar un elemento, y Grid para diseños en dos dimensiones donde filas y columnas deben alinearse, como muros de tarjetas o paneles. Todo se actualiza al instante en tu navegador, así que puedes experimentar y ver qué hace cada propiedad.
Flexbox sirve para disposiciones en una sola dimensión, a lo largo de una fila o columna: menús, grupos de botones o centrar un elemento. Grid sirve para diseños en dos dimensiones donde filas y columnas deben alinearse, como listados de tarjetas o la estructura de una página. Se combinan bien: Grid para el esqueleto y Flexbox dentro de cada componente.
align-items actúa en el eje transversal; si el contenedor no tiene espacio libre en esa dirección, los elementos no tienen adónde moverse. Además, el valor por defecto stretch los estira. Cambia a flex-start o center y dale al contenedor más altura que a los elementos para ver la diferencia.
Indica al navegador que cada columna mida como mínimo 100 px y como máximo una parte igual del espacio restante, y que coloque tantas columnas como quepan en el contenedor. Al estrecharse el contenedor, las columnas se reducen solas: una cuadrícula adaptable sin media queries.
No. La salida incluye las propiedades de maquetación de .container (display, dirección, alineación, ajuste o plantillas de cuadrícula y gap) y la estructura HTML de .item. Las tarjetas de colores de la vista previa son de muestra; añade tú el ancho, alto, colores y relleno de los elementos reales.
Ver esta categoría: Diseño y color
Genera combinaciones cromáticas armoniosas a partir de un color principal con exportación en HEX y RGB.
Optimiza y comprime código SVG localmente eliminando metadatos y etiquetas redundantes con vista previa.
Crea y previsualiza gradientes lineales y radiales, explora combinaciones prediseñadas y copia el código CSS.
Convierte valores de color entre HEX, RGB, HSL y CMYK, y calcula el ratio de contraste de accesibilidad WCAG 2.1.
