Con las columnas CSS, puede crear un diseño inspirado en la impresión con poco marcado adicional que se puede adaptar más allá de un lienzo fijo. Un navegador compatible hará cálculos para ajustar y equilibrar el contenido en columnas ordenadas. Si ya está trabajando con un diseño fluido, las columnas se reajustarán automáticamente. Con la combinación correcta de propiedades, las columnas CSS pueden ser una opción de diseño interesante que es fácil de responder y se degrada con gracia.
Dónde declarar columnas
Puede declarar columnas en cualquier elemento de nivel de bloque. Las columnas se pueden aplicar a un solo elemento o se pueden aplicar a varios elementos al apuntar a su padre.
En la imagen de abajo, el lado izquierdo muestra las reglas de columna CSS que se aplican al segundo párrafo para transformar solo ese contenido en columnas. El lado derecho muestra las reglas que se aplican a un elemento contenedor como un <div></div> o <article></article> para transformar los elementos en un diseño de varias columnas.
Cómo declarar columnas
Hay tres formas diferentes de declarar columnas:
- Declarar
column-count. - Declarar
column-width. - Declare ambos (recomendado).
Exploremos las diferentes formas de declarar columnas.
1. Declarar recuento de columnas
Usar column-count para declarar el número de columnas.
article {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}Demo en vivo
Ver la pluma [2] Columnas CSS, recuento por Katy DeCorah (@katydecorah) en CodePen.
El número de columnas permanece constante incluso cuando cambia el ancho del navegador, como se muestra en el gif a continuación.
2. Declare el ancho de la columna
Usar column-width para declarar el ancho de las columnas.
El valor especificado no es un valor absoluto, sino un ancho mínimo. Dado que column-width, el navegador decidirá cuántas columnas de al menos ese ancho pueden caber en el espacio. El navegador también tendrá en cuenta la canaleta o el espacio entre columnas en este cálculo (más sobre esto más adelante). Luego, el navegador expandirá las columnas para distribuirlas uniformemente para llenar el ancho del contenedor.
Por ejemplo, si inspecciona el párrafo en la demostración en vivo a continuación, encontrará que el ancho de la columna es en realidad mayor que 150px, que es el valor establecido de column-width.
article {
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
}Demo en vivo
Ver la pluma [3] Columnas CSS de Katy DeCorah (@katydecorah) en CodePen.
Una vez que el navegador no puede caber al menos dos columnas tan anchas como el column-width entonces no aparecerán columnas y el diseño volverá a un diseño de una sola columna.
El siguiente gif muestra cómo se liberan las columnas a medida que se reduce el ancho del navegador. a diferencia de column-count esta propiedad responde de forma inherente.
3. Declare ambos (recomendado)
Usar column-count y column-width juntos para el mejor control sobre las columnas CSS. Puede declarar cada propiedad o utilizar la abreviatura columns.
Cuando se declaran ambas propiedades, column-count es el número máximo de columnas y column-width es el ancho mínimo para esas columnas.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
}
/* or */
article {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}Demo en vivo
Ver la pluma [4] Columnas CSS, columnas de Katy DeCorah (@katydecorah) en CodePen.
El siguiente gif demuestra cómo usar column-count y column-width juntos responden a medida que se reduce el ancho del navegador.
Personalizar columnas
Hay varias propiedades para personalizar aún más las columnas CSS.
espacio entre columnas
Para ajustar la canaleta, o el espacio entre columnas, declare column-gap.
Para la mayoría de los navegadores, el valor predeterminado para column-gap es 1em. Puede declarar un nuevo valor siempre que sea mayor o igual a 0.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
}Demo en vivo
Ver la pluma [5] Columnas CSS, espacio entre columnas de Katy DeCorah (@katydecorah) en CodePen.
El navegador realizará los cálculos necesarios para espaciar y equilibrar uniformemente las columnas a pesar de un espacio mayor.
El siguiente gif demuestra cómo el navegador libera las columnas y elimina el espacio cuando el ancho del navegador se reduce.
regla de columna
Para agregar una línea vertical entre cada columna, declare column-rule.
Esta propiedad es la abreviatura de column-rule-width, column-rule-style, column-rule-color. La taquigrafía sigue el mismo patrón de estilo que border.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
-webkit-column-rule: 1px dotted #ddd;
-moz-column-rule: 1px dotted #ddd;
column-rule: 1px dotted #ddd;
}Demo en vivo
Ver la pluma [6] Columnas CSS, regla de columna de Katy DeCorah (@katydecorah) en CodePen.
Me gusta column-gap, la línea vertical saldrá una vez que el ancho del navegador sea demasiado estrecho, como se muestra en el siguiente gif.
intervalo de columnas
Para romper el flujo de la columna temporalmente, declare column-span en un elemento hijo. Actualmente, Firefox no es compatible con esta función (pero puedes votar por ella en Bugzilla).
La imagen a continuación contiene un encabezado que indica el comienzo de un nuevo capítulo en la historia, pero continúa con el flujo de columnas.
Para separar el encabezado del flujo de la columna, agregue column-span: all al elemento. Esta declaración detendrá temporalmente el flujo de la columna para permitir que el elemento abarque las columnas, pero reiniciará las columnas con el siguiente elemento.
h3 {
-webkit-column-span: all;
column-span: all;
}Demo en vivo
Ver la pluma [7] Columnas CSS, columna de Katy DeCorah (@katydecorah) en CodePen.
relleno de columna
Para cambiar la forma en que el contenido llena las columnas, declare column-fill. Actualmente, esta propiedad solo está disponible en Firefox.
Cuando se agrega altura a un elemento con columnas, Firefox se comporta de manera diferente a los otros navegadores. Firefox equilibrará automáticamente el contenido, mientras que el otro navegador llenará las columnas secuencialmente.
La siguiente imagen demuestra cómo se comporta Firefox en comparación con otros navegadores cuando se agrega altura a un elemento en columnas.
En Firefox, puede cambiar este comportamiento declarando column-fill: auto. Esta regla hará que las columnas se llenen secuencialmente, como se muestra en la demostración en vivo a continuación.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-moz-column-fill: auto;
column-fill: auto;
height: 350px;
}Demo en vivo
Ver la pluma [8] Columnas CSS, relleno de columnas por Katy DeCorah (@katydecorah) en CodePen.
Dado que se debe declarar una altura para que Firefox habilite column-fill, la restricción de altura rompe el patrón fluido. El contenido se expande horizontalmente porque no puede fluir verticalmente como se muestra en el siguiente gif. En este caso, se podría agregar una consulta de medios para administrar la altura (más sobre esto más adelante).
Los otros navegadores no son compatibles column-fill y llenará las columnas secuencialmente cuando se declare una altura en un elemento en columnas. Vale la pena señalar que cuando se agrega altura a cualquier elemento en columna, independientemente del navegador o el uso de column-fill, la restricción romperá el patrón fluido.
Limitaciones
Las columnas pueden ser una forma elegante de entregar contenido, siempre que el contenido siga siendo legible. Un diseño de varias columnas puede resultar difícil de leer cuando el contenido se desborda horizontalmente o las columnas se vuelven más altas que la ventana gráfica.
El contenido se desborda horizontalmente
Como se muestra en la column-fill sección, si se agrega altura a un elemento con columnas, entonces el elemento se expandirá horizontalmente para ajustarse al contenido. El desbordamiento romperá el diseño y enviará a los usuarios en una dirección diferente.
Posible solución: cree un min-width consulta de medios para declarar la regla de altura.
En la siguiente demostración, reduje la ventana del navegador para encontrar cuándo las columnas comenzaron a desbordarse y anoté ese número. A continuación, escribí un min-width media query usando el valor de cuando las columnas se desbordan y movieron la regla de altura a la media query.
article {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
-moz-column-fill: auto;
column-fill: auto;
}
@media (min-width: 500px) {
article {
height: 350px;
}
}Demo en vivo
Ver la pluma [11] Columnas CSS, altura de relleno de columna por Katy DeCorah (@katydecorah) en CodePen.
Como se muestra en el gif a continuación, cuando las columnas se liberan, la regla de altura está fuera de los límites y las columnas fluyen verticalmente.
Las columnas se vuelven más altas que la ventana gráfica
Si la altura de la columna se extiende más allá de la ventana gráfica, los usuarios deberán desplazarse para seguir el flujo de la columna.
Posible solución: cree un min-height consulta de medios para activar las columnas.
En el siguiente ejemplo, las columnas solo se activarán si el elemento de la columna tiene un min-height: 400px;. Llegué a este número reduciendo el ancho del navegador hasta el punto justo antes de que se liberen las columnas. A continuación, ajusté la altura del navegador para encontrar dónde empezaron a caer las columnas debajo de la ventana gráfica. Usé ese número para el valor de la min-height consulta de medios.
@media (min-height: 400px) {
article {
-webkit-columns: 2 350px;
-moz-columns: 2 350px;
columns: 2 350px;
}
}Demo en vivo
Ver la pluma [10] Columnas CSS, vertical amigable por Katy DeCorah (@katydecorah) en CodePen.
El siguiente gif demuestra que el elemento en columna debe tener al menos 400 px de alto para mostrar el contenido en columnas.
Apoyo
Las columnas CSS tienen un soporte decente (IE10 +) y aún requieren prefijos en todas las propiedades. Obtenga más detalles sobre las propiedades de varias columnas en ¿Puedo usar…?
Incluso si su navegador favorito no admite diseños de varias columnas, tenga en cuenta que se degradan con gracia en un diseño de una sola columna. Las columnas CSS son como las escaleras mecánicas de la entrega de contenido (como tan elocuentemente lo expresó Mitch Hedberg):
Un diseño de varias columnas no puede romperse, solo puede convertirse en un diseño de una sola columna.