Los diseños de varias columnas aún no han alcanzado su máximo potencial, principalmente porque varias columnas fuerzan el desplazamiento horizontal una vez que el contenido excede los límites. Esto no es intuitivo y es una experiencia de usuario imposible, especialmente en la web moderna donde el desplazamiento es vertical de forma predeterminada.
Tomemos como ejemplo el siguiente caso:
El código CSS podría verse así:
body {
max-width: 700px;
}
.article {
column-gap: 10px;
column-count: 3;
height: 350px;
}Multicolumn crea columnas adicionales y desplazamiento horizontal cuando el tamaño del contenido excede el contenedor principal. Sin embargo, finalmente tenemos una herramienta que llegó recientemente a Chrome para “solucionar” este problema sin tener que recurrir a soluciones más complicadas.
Cromo 145 introducido column-height y column-wrap Propiedad que nos permite incluir contenido adicional en una nueva línea debajo, creando un desplazamiento vertical en lugar de un desplazamiento horizontal.
Entonces, ahora podemos hacer algo como esto en Chrome 145+:
body {
max-width: 700px;
}
.article {
column-gap: 10px;
column-count: 3;
column-wrap: wrap;
height: 350px;
}Obtenemos este bonito diseño de varias columnas que mantiene column-count:
Esto convierte efectivamente un diseño de varias columnas en un flujo 2D, lo que nos ayuda a crear un desplazamiento más adecuado para la web.
⚠️ Soporte del navegador: A partir de abril de 2026, column-wrap y column-height Disponible en Cromo 145+. Firefox, Safari y Edge aún no admiten estas propiedades.
¿Qué resuelve esto realmente?
Las nuevas propiedades son realmente útiles en una variedad de situaciones:
Bloque de contenido de altura fija
Este es probablemente uno de los casos de uso más útiles para estas propiedades. Esto funciona muy bien si estás trabajando con algo que tiene una altura predecible o limitada, como una cuadrícula de tarjetas donde cada tarjeta tiene una altura máxima.
cambiar entre column-wrap: wrap y column-wrap: nowrap Vea las diferencias en la demostración a continuación (requiere Chrome 145+).
Si estás marcando esto en un navegador no compatible, esto es nowrap disposición:
esto es wrap disposición:
El entorno crea un flujo más fluido.
Sin embargo, si el contenido de cada tarjeta no está equilibrado, incluso usar un ajuste de línea puede dar lugar a un diseño desequilibrado:
Diseños estilo periódico y estilo revista.
Otro caso de uso de la vida real es cuando se diseña una sección o diseño estilo periódico en el que se desea establecer alturas explícitas de contenedores y columnas. Como puede ver en los ejemplos anteriores, la combinación de altura de columna y ajuste de columna ayuda a que el diseño responda a diferentes tamaños de pantalla y, al mismo tiempo, conserva un flujo de información más intuitivo.
carrusel de dirección de bloque
Este es mi caso de uso favorito column-wrap ¡característica! Al configurar las alturas de las columnas para que coincidan con la ventana gráfica (por ejemplo, 100dvh), básicamente puedes pensar en un flujo de varias columnas como un sistema de paginación, donde tu contenido ocupa la altura de la pantalla y luego se “ajusta” verticalmente. cuando con scroll-snap-type: y mandatoryobtienes una experiencia de cambio de página vertical y fluida que maneja la fragmentación del contenido sin necesidad de edición manual ni cálculos de JavaScript.
Pruebe la demostración a continuación y compruébelo usted mismo. A menos que esté utilizando Chrome 145+, verá un desplazamiento horizontal en lugar del desplazamiento vertical esperado.
Sin embargo, esto tiene un inconveniente: si el contenido de la diapositiva es demasiado largo, column-wrap Lo haría fluir verticalmente, pero el flujo se sentiría interrumpido por este desequilibrio.
problemas que no resolvieron
Si bien estas propiedades son ciertamente útiles, no son una solución integral para todos los diseños de varias columnas. Hay varias situaciones en las que puede que no sea el enfoque “correcto”.
contenido verdaderamente dinámico
Estos atributos son de poca utilidad si el contenido es muy desconocido o impredecible de antemano (por ejemplo, contenido generado por el usuario, páginas controladas por CMS). El diseño aún se puede envolver verticalmente. column-wrap Sin embargo, sin alturas de columna fijas, el diseño seguirá siendo impredecible.
Puede provocar una sobreestimación de las alturas de las columnas, dejando espacios incómodos en el diseño. Asimismo, puede provocar que subestimes la altura, provocando que las columnas queden desequilibradas. La solución aquí es usar JS para calcular la altura, lo que va en contra de la idea de una solución nativa de CSS.
No hay capacidad para responder a las consultas de los medios.
Para un diseño verdaderamente “responsive”, todavía necesitamos usar consultas de medios para ajustar column-count y column-height para diferentes tamaños de ventana. Si bien el ajuste ayuda y crea beneficios incrementales para las soluciones nativas de CSS, solo puede ayudar a ajustar el comportamiento de desbordamiento. Por lo tanto, cuando se admiten diferentes tamaños de pantalla, la dependencia de las consultas de medios todavía existe.
Requisitos de alineación complejos
Si necesita un control preciso sobre la posición relativa de los elementos, Cuadrícula CSS Sigue siendo una mejor opción. Si bien varias columnas con envoltura pueden brindarle liquidez, aún carece de control de posicionamiento.
Comparar alternativas
Veamos cómo se compara el enfoque de varias columnas con alternativas existentes como CSS Grid, caja flexible CSS,así como Evolución de la mampostería CSSque proporciona un diseño similar.
Una diferencia clave es que, mientras Grid y Flexbox administran diferentes contenedores, Multicolumn es el único sistema que puede dividir un único flujo continuo de contenido en múltiples columnas y filas. Esto lo hace más adecuado para representar contenido de formato largo, como vimos en el ejemplo del diseño del periódico.
CSS Grid nos permite controlar el diseño a través de una estructura de cuadrícula, lo que lo hace ideal para Diseños complejos que requieren un posicionamiento preciso O siga un diseño asimétrico, como un panel de control deseado o una galería de imágenes receptiva. auto-fit Basado en el tamaño de la pantalla.
Flexbox con capacidades de ajuste es excelente para crear elementos de interfaz de usuario estándar, como barras de navegación y nubes de etiquetas, que deberían ajustarse a tamaños de pantalla más pequeños.
notas: Cromo también experimento con un nuevo flex-wrap: balance Las palabras clave también pueden proporcionar más control sobre el ajuste de líneas.
CSS Grid y Flexbox envuelto son excelentes para diseños individuales por proyecto. Manejan bien el contenido de altura dinámica y proporcionan un mejor control de alineación que los métodos de varias columnas. Sin embargo, como hemos visto, varias columnas con propiedades de actualización tienen ventajas cuando se trata de un diseño que tenga en cuenta la fragmentación.
CSS Masonry, por otro lado, es útil para entrelazar elementos de diferentes alturas. Esto lo hace perfecto para crear tableros con estilos (como Pinterest) que empaquetan elementos de diferentes alturas de una manera eficiente y hermosa. Otro gran caso de uso es un sitio web de comercio electrónico que utiliza una cuadrícula de mampostería para mostrar productos, ya que las descripciones e imágenes pueden hacer que las tarjetas tengan diferentes alturas.
en conclusión
nuevo column-wrap y column-height Chrome 145 admite propiedades que mejoran significativamente la usabilidad de los diseños de varias columnas. Al habilitar la transmisión 2D, podemos segmentar el contenido sin perder la experiencia de desplazamiento vertical.
Dicho esto, estas características no reemplazan la precisión estructural de CSS Grid o la flexibilidad basada en proyectos de Flexbox. Pero llenarán un nicho único. A medida que la compatibilidad con los navegadores continúa ampliándose, la mejor manera de manejar diseños de varias columnas es comprender sus ventajas y limitaciones. No resolverán el problema de la altura dinámica ni eliminarán la necesidad de consultas de medios, pero permitirán que el contenido fluya continuamente en el espacio 2D.
