CSS
Multicolumn, floats y shapes
Explica multicolumn layout, floats y CSS Shapes para distribuir texto en columnas y permitir que el contenido fluya alrededor de formas.
- Última actualización
- Actualizada
- Nivel
- Aplicación
CSS
Explica multicolumn layout, floats y CSS Shapes para distribuir texto en columnas y permitir que el contenido fluya alrededor de formas.
.article {
column-width: 18rem;
column-gap: 2rem;
}El navegador crea tantas columnas como caben respetando una anchura preferida.
.article {
column-count: 3;
}Solicita una cantidad, pero el resultado sigue limitado por espacio y otros valores.
.article {
columns: 18rem 3;
}Combina width y count como objetivos, no como garantías rígidas.
.article {
column-rule: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}Dibuja una regla entre columnas sin ocupar el lugar de un border de cada columna.
.article h2 {
column-span: all;
}Un elemento puede abarcar todas las columnas y reiniciar el flujo.
El contenido se fragmenta entre columnas. Propiedades como break-inside, break-before y break-after ayudan a controlar cortes.
.figure {
break-inside: avoid;
}Avoid es una preferencia, no una garantía cuando el fragmento no cabe.
Visualmente las columnas se leen de arriba abajo y luego a la siguiente. En pantallas altas o estrechas pueden obligar a desplazarse de manera incómoda.
No uses multicol para interfaces de cards; Grid suele representar mejor esos grupos.
.article img {
float: inline-start;
margin-inline-end: 1rem;
}Float retira parcialmente la caja del normal flow y permite que inline content la rodee.
Sigue siendo útil para figuras editoriales, no como sistema principal de layout.
.next-section {
clear: both;
}Evita quedar junto a floats anteriores.
Un parent puede contener floats mediante display: flow-root.
.portrait {
float: inline-start;
clip-path: circle();
shape-outside: circle();
shape-margin: 1rem;
}clip-path cambia lo visible. shape-outside cambia el contorno alrededor del cual fluye el texto y requiere un float.
¿Por qué clip-path: circle() no hace que el texto rodee un círculo por sí solo?
Porque clip-path solo cambia la región visible; el flujo de texto necesita shape-outside sobre un float.
Media queries inicia el bloque de diseño responsivo.