Laboratorio Flexbox / Grid
Flexbox y Grid en vivo
Modelos
Contenedor
align-content solo actúa cuando los elementos pasan a varias líneas (flex-wrap: wrap).
Vista previa
Haga clic en un elemento para ajustar sus propiedades. Cambie el tamaño de la vista previa desde su esquina inferior derecha.
Los tamaños mínimos de los elementos solo sirven para la vista previa: no están en el CSS.
Elemento 1 seleccionado
Código
.container {
display: flex;
gap: 8px;
}Acerca de la herramienta
Este laboratorio ayuda a entender y ajustar una maquetación con Flexbox o CSS Grid sin ir y volver al editor. En modo flex cambias flex-direction, flex-wrap, justify-content, align-items, align-content y gap. En modo grid escribes grid-template-columns y grid-template-rows, o eliges un valor habitual como repeat(auto-fill, minmax(120px, 1fr)), y ajustas grid-auto-flow, justify-items y align-items.
Cada elemento, hasta un máximo de 12, tiene sus propios ajustes: flex-grow, flex-shrink, flex-basis, order y align-self en flex; extensión en columnas y filas o líneas de inicio y final en grid. Seis modelos sirven de punto de partida: centrado, barra de navegación, barra lateral, tarjetas adaptables, Holy Grail y cuadrícula bento. El CSS generado solo incluye las propiedades que cambian respecto a los valores por defecto.
Cómo usarla
- Parte de uno de los «Modelos» o elige «Flexbox» o «Grid» en «Modo de maquetación».
- En «Contenedor», ajusta las propiedades de alineación y el «Espaciado (gap)».
- Pulsa «Añadir un elemento» si hace falta y haz clic en un elemento de la «Vista previa» para ajustar sus propiedades.
- En grid, elige la «Colocación» del elemento: «Automática», «Extensión (span)» o «Líneas».
- Pulsa «Copiar el CSS».
Preguntas frecuentes
¿Cómo se organiza el CSS generado?
Incluye una regla .container con display: flex o grid y las propiedades modificadas, y después .item-1, .item-2, etc. para cada elemento que se aparta de los valores por defecto. Cambia esos selectores por los nombres de tus propias clases.
¿Por qué align-content no hace nada?
align-content reparte las líneas de un contenedor flex, así que solo actúa cuando los elementos pasan a varias líneas con flex-wrap: wrap o wrap-reverse. Con nowrap, la herramienta lo indica y no añade la propiedad al CSS generado.
¿Cómo hago que un elemento ocupe varias columnas en grid?
Selecciona el elemento, elige la colocación «Extensión (span)» e indica cuántas columnas o filas debe ocupar. La colocación «Líneas» fija en cambio las líneas de inicio y final: 0 equivale a auto y -1 es la última línea.
¿Los tamaños de la vista previa están en el CSS?
No. Los elementos de la vista previa tienen tamaños mínimos variados para que el efecto de cada alineación se vea, pero no aparecen en el código copiado. También puedes cambiar el tamaño de la zona de vista previa desde su esquina inferior derecha.