Blog

Cuándo y cómo utilizar la disposición de varias columnas en CSS

La especificación de diseño de varias columnas a menudo se pasa por alto mientras usamos Grid y Flexbox. En este artículo Rachel Andrew explica por qué es diferente a otros métodos de diseño, y muestra algunos patrones útiles y sitios que lo muestran bien.

En todo el entusiasmo sobre CSS Grid Layout y Flexbox, otro método de diseño es a menudo pasado por alto. En este artículo voy a echar un vistazo a la disposición de varias columnas – a menudo referido como multicol o a veces “Columnas CSS”. Descubrirás para qué tareas es adecuado, y algunas de las cosas que hay que tener en cuenta al hacer columnas.

¿Qué es Multicol?

La idea básica de multicol, es que puedes tomar un trozo de contenido y fluirlo en múltiples columnas, como en un periódico. Esto se hace utilizando una de las dos propiedades. La column-count especifica el número de columnas en las que se quiere dividir el contenido. La propiedad column-width especifica la anchura ideal, dejando que el navegador averigüe cuántas columnas caben.

No importa qué elementos estén dentro del contenido que conviertas en un contenedor multicol, todo permanece en el flujo normal, pero dividido en columnas. Esto hace que multicol se diferencie de otros métodos de diseño que tenemos en los navegadores hoy en día. Flexbox y Grid, por ejemplo, toman los elementos hijos del contenedor y esos elementos participan en un layout flex o grid. Con multicol, usted todavía tiene el flujo normal, pero dentro de una columna.

En el siguiente ejemplo estoy usando column-widthpara mostrar columnas de al menos 14em. Multicol asigna tantos 14em que quepan y luego reparte el espacio restante entre las columnas. Las columnas serán como mínimo 14ema menos que sólo podamos mostrar una columna, en cuyo caso puede ser más pequeña. Multicol fue la primera vez que vimos este tipo de comportamiento en CSS, creándose columnas que eran esencialmente responsivas por defecto. No es necesario añadir Media Queries y cambiar el número de columnas para varios puntos de ruptura, en su lugar especificamos un ancho óptimo y el navegador lo resolverá.

Ver la pluma Smashing Multicol: ancho de columna de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Smashing Multicol: ancho de columna de Rachel Andrew (@rachelandrew) en CodePen.

Columnas de estilo

Las cajas de las columnas creadas cuando se utiliza una de las propiedades de las columnas no pueden ser dirigidas. No puede dirigirse a ellas con JavaScript, ni puede estilizar una caja individual para darle un color de fondo o ajustar el relleno y los márgenes. Todas las cajas de las columnas tendrán el mismo tamaño. Lo único que puedes hacer es añadir una regla entre columnas, utilizando la propiedad column-rule, que actúa como borde. También puedes controlar el espacio entre columnas usando la propiedad column-gap que tiene un valor por defecto de 1em sin embargo puedes cambiarlo por cualquier unidad de longitud válida.

Ver la Pluma Smashing Multicol: estilo de columna de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Smashing Multicol: estilo de columna de Rachel Andrew (@rachelandrew) en CodePen.

Esa es la funcionalidad básica de multicol. Puedes tomar un trozo de contenido y dividirlo en columnas. El contenido llenará las columnas a su vez, creando columnas en la dirección de la línea. Puedes controlar los espacios entre columnas y añadir una regla, con los mismos valores posibles que el borde. Hasta aquí todo bien, y todo lo anterior está muy bien soportado en los navegadores y lo ha estado durante mucho tiempo, lo que hace que esta especificación sea muy segura de usar en términos de compatibilidad hacia atrás.

Hay algunas cosas más que podrías considerar con tus columnas, y algunos problemas potenciales a tener en cuenta cuando se usan columnas en la web.

Columnas de extensión

A veces se desea dividir el contenido en columnas, pero luego hacer que un elemento se extienda a través de las cajas de las columnas. Aplicando la función column-span a un descendiente del contenedor multicolor lo consigue.

En el siguiente ejemplo, he provocado un <blockquote> para que se extienda a través de mis columnas. Tenga en cuenta que cuando se hace esto, el contenido se rompe en un conjunto de cajas por encima del span, a continuación, se inicia un nuevo conjunto de cajas de la columna por debajo. El contenido no salta a través del elemento abarcado.

El column-span se está implementando actualmente en Firefox y está detrás de una bandera de función.

Ver la Pluma Smashing Multicol: column-span de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Smashing Multicol: column-span de Rachel Andrew (@rachelandrew) en CodePen.

Tenga en cuenta que en la especificación actual, los valores de column-span son all o none. No puedes abarcar sólo algunas de las columnas, pero puedes obtener el tipo de diseño que podrías ver en un periódico combinando multicol con otros métodos de diseño. En el siguiente ejemplo, tengo un contenedor de rejilla con dos carriles de columna. La pista de la izquierda es 2fr, la pista de la derecha 1fr. El artículo de la pista de la izquierda lo he convertido en un contenedor multicol con dos pistas, también tiene un elemento de spanning.

A la derecha, tenemos un aparte que va en la segunda pista de la columna Grid. Jugando con los distintos métodos de disposición que tenemos a nuestra disposición, podemos averiguar qué método de disposición se adapta exactamente al trabajo que tenemos entre manos: ¡no tengas miedo de mezclar y combinar!

Ver la pluma Smashing Multicol: mezcla de métodos de diseño de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Smashing Multicol: mezcla de métodos de diseño de Rachel Andrew (@rachelandrew) en CodePen.

Control de las pausas de contenido

Si tiene contenido con encabezados, probablemente querrá evitar la situación en la que un encabezado termine como la última cosa en una columna con el contenido pasando a la siguiente columna. Si tienes imágenes con subtítulos, la situación ideal sería que la imagen y el subtítulo permanecieran como una unidad, sin dividirse en columnas. Para solucionar estos problemas, CSS tiene propiedades para controlar dónde se rompe el contenido.

Cuando divides tu contenido en columnas, realizas lo que se conoce como fragmentación. Lo mismo ocurre si divides tu contenido entre páginas, como cuando creas una hoja de estilos para un contexto de impresión. Por lo tanto, multicol está más cerca de los medios paginados que de otros métodos de maquetación en la web. Debido a esto, durante varios años la forma de controlar las interrupciones en el contenido ha sido utilizar la función page-break- que formaban parte de CSS2.1.

  • page-break-before
  • page-break-after
  • page-break-inside

Más recientemente, la especificación CSS Fragmentation ha definido propiedades para la fragmentación que están diseñadas para cualquier contexto fragmentado, la especificación incluye detalles para Paged Media, multicol y la especificación Regions estancada; Regions también fragmenta una pieza continua de contenido. Al hacer que estas propiedades sean genéricas, pueden aplicarse a cualquier contexto de fragmentación futuro, del mismo modo que las propiedades de alineación de Flexbox se trasladaron a la especificación de alineación de cajas para que pudieran utilizarse en el diseño de cuadrículas y bloques.

  • break-before
  • break-after
  • break-inside

Como ejemplo, he utilizado break-inside avoid en el <figure> para evitar que la leyenda se separe de la imagen. Un navegador de apoyo debe mantener la figura unida aunque eso haga que las columnas se vean desequilibradas.

Ver la Pluma Smashing Multicol: break-inside de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Smashing Multicol: break-inside de Rachel Andrew (@rachelandrew) en CodePen.

Desafortunadamente, el soporte para estas propiedades en multicol es bastante irregular. Incluso cuando son soportadas deben ser vistas como una sugerencia debido al hecho de que sería posible hacer tantas solicitudes mientras se intenta controlar la ruptura, que esencialmente el navegador no puede realmente romper en cualquier lugar. La especificación define las prioridades en este caso, sin embargo, es probablemente más útil para controlar sólo los casos más importantes.

El problema de las columnas en la web

Una de las razones por las que no vemos que se utilicen mucho las multicolumnas en la web es el hecho de que sería muy fácil acabar con una experiencia de lectura que hiciera que el lector se desplazara en la dimensión del bloque. Eso significaría desplazarse verticalmente hacia arriba y hacia abajo para los que utilizamos el inglés u otro modo de escritura vertical. Esto no es una buena experiencia de lectura.

Si se fija la altura del contenedor, por ejemplo usando la unidad de la ventana gráfica vh, y hay demasiado contenido, entonces el desbordamiento se producirá en la dirección de la línea y entonces obtendrá una barra de desplazamiento horizontal en su lugar.

Ver la Pluma Smashing Multicol: columnas de desbordamiento de Rachel Andrew (@rachelandrew) en CodePen.

Ver la Pluma Smashing Multicol: columnas de desbordamiento de Rachel Andrew (@rachelandrew) en CodePen.

Ninguna de las dos cosas es ideal, y hacer uso de multicol en la web es algo que tenemos que pensar muy cuidadosamente en términos de la cantidad de contenido que podemos pretender que fluya en nuestras columnas.

Bloquear columnas de desbordamiento

Para el nivel 2 de la especificación, estamos considerando cómo habilitar un método por el cual las columnas de desbordamiento, las que actualmente acaban provocando la barra de desplazamiento horizontal, podrían crearse en su lugar en la dirección del bloque. Esto significaría que se podría tener un contenedor multicol con una altura, y una vez que el contenido hubiera hecho columnas que llenaran ese contenedor, se crearía un nuevo conjunto de columnas debajo. Esto se parecería un poco a nuestro ejemplo de spanning de arriba, sin embargo, en lugar de tener una llave que cause el inicio de las nuevas cajas de columnas, sería el desbordamiento causado por un contenedor con una restricción en la dimensión del bloque.

Esta característica haría que multicol fuera mucho más útil para la web. Aunque ahora mismo estamos un poco lejos, puedes echar un ojo a el tema en el repo del Grupo de Trabajo de CSS. Si tienes casos de uso adicionales para esta función, publícalos, puede ser de gran ayuda a la hora de diseñar la nueva función.

¿Para qué es útil Multicol hoy en día?

Con la especificación actual, no se aconseja dividir todo el contenido en columnas sin tener en cuenta los problemas de desplazamiento. Sin embargo, hay algunos casos en los que multicol es ideal en la web. Hay suficientes casos de uso para que sea algo que debas considerar cuando busques patrones de diseño.

Colapsar elementos pequeños de interfaz de usuario o de texto

Multicol puede ser útil en cualquier lugar donde tengas una pequeña lista de elementos que quieras que ocupen menos espacio. Por ejemplo, una simple lista de casillas de verificación, o una lista de nombres. A menudo, en estos escenarios, el visitante no lee una columna y vuelve a la parte superior de la siguiente, sino que escanea el contenido en busca de una casilla de verificación en la que hacer clic o un elemento que seleccionar. Incluso si crea una experiencia de desplazamiento, puede que no sea un problema.

Puede ver un ejemplo de multicol utilizado de esta manera en Sander de Jong sobre la DonarMuseum sitio web.

Los nombres están ordenados en varias columnas en el sitio web del DonarMuseum
En DonarMuseum, podemos ver que se utiliza multicol para mostrar listas de nombres. (Fuente de la imagen) (Vista previa grande)

Pequeñas cantidades de contenido conocidas

Hay ocasiones en las que diseñamos un sitio en el que sabemos que alguna pieza de contenido es relativamente pequeña, y que cabrá en la mayoría de las pantallas sin causar un desplazamiento no deseado. He utilizado multicol en Páginas de presentación de Notistpara la introducción de una charla.

Andy Clarke diseñó un bonito ejemplo para el sitio web de Equfund.

Un diseño a dos columnas que incluye varios contenidos
En el sitio web de Equfund, se puede ver cómo los diferentes elementos HTML permanecen en el flujo normal mientras se muestran dentro de las columnas. (Fuente de la imagen) (Vista previa grande)

Para evitar la posibilidad de que las pantallas muy pequeñas provoquen el desplazamiento, recuerde que puede utilizar las consultas de medios para comprobar la altura además de la anchura (o en un mundo lógico, el bloque además de la línea). Si sólo habilita las columnas en un punto de ruptura que tenga un min-height suficientemente grande para su contenido, esto puede evitar que los usuarios de dispositivos muy pequeños tengan una mala experiencia de desplazamiento.

Visualización del contenido en forma de mampostería

Otro lugar en el que la Disposición de Columnas Múltiples funciona maravillosamente es si usted quiere crear un tipo de mampostería para mostrar el contenido. Multicol es el único método de diseño que actualmente crea este tipo de diseño con elementos de altura desigual. Grid dejaría un hueco, o estiraría los elementos para hacer una cuadrícula bidimensional estricta.

Veerle Pieters tiene un bello ejemplo de uso de multicol de esta manera en su inspiración página.

Una disposición de cajas múltiples en columnas diseñada por Veerle Pieters
En este diseño de Veerle Pieters, se utiliza multicol para disponer múltiples cajas o tarjetas en forma de columnas. (Vista previa grande)

Grid y Flexbox Fallbacks

El column- también se pueden utilizar como alternativa para el diseño de Grid y Flex. Si especifica una de las propiedades en un contenedor, entonces convierta ese contenedor en un diseño Flex o Grid utilizando display: flex o display: grid se eliminará cualquier comportamiento de las columnas. Si tiene, por ejemplo, un diseño de tarjetas que utiliza el diseño de cuadrícula, y el diseño sería legible si se ejecutara en columnas en lugar de a través de la página, podría utilizar multicol como un simple recurso. Los navegadores que no soportan Grid obtendrán la visualización multicol, los que soportan Grid obtendrán el Grid Layout.

¡No se olvide de Multicol!

Con bastante frecuencia respondo a preguntas sobre Grid y Flexbox en las que la respuesta es no usar Grid o Flexbox, sino mirar Multicol. Probablemente no lo usarás en cada sitio, pero cuando te encuentres con un caso de uso puede ser realmente útil. En MDN hay recursos útiles para multicol y el relacionado propiedades de fragmentación.

Si has utilizado multicol en un proyecto, tal vez puedas dejar una nota en los comentarios, para compartir otras formas en las que podemos utilizar la función.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Cerrar
Cerrar