Con CSS es posible distribuir el texto en múltiples columnas en lugar de una sola, de forma similar a la que usan los periódicos de papel y las revistas. Este tipo de maquetación se utiliza para mejorar la legibilidad del texto. Al ser columnas más estrechas, es más fácil encontrar la posición en la línea siguiente.
Lista de propiedades para definir columnas:
| Propiedad | Descripción |
|---|---|
column-count | Indica el número de columnas. |
column-width | Indica el ancho ideal de las columnas. |
columns | Abreviatura para definir columnas. |
Mediante estas propiedades se puede crear un sistema de maquetación en CSS que divide el texto en varias columnas. De esta forma, el navegador web llevará a cabo la tarea de la división, de una forma más automatizada y flexible.
Propiedades para separar columnas:
| Propiedad | Descripción |
|---|---|
column-gap | Define la separación entre columnas. |
column-rule-style | Indica el estilo de la regla de columnas. |
column-rule-color | Indica el color de la regla de columnas. |
column-rule-width | Indica el grosor de la regla de columnas. |
column-rule | Abreviatura para definir reglas de columnas. |
Propiedades para distribuir el contenido en las columnas:
column-span | Permite extender elementos sobre otras columnas. |
column-fill | Controla el reparto del contenido entre columnas. |
Creación de columnas
Para empezar a trabajar con columnas hay que definirlas mediante las propiedades column-count y/o column-width. Se pueden usar las dos a la vez. Mediante la abreviatura columns se simplifica el código CSS.
Con la propiedad column-count se indica un número máximo de columnas, mientras que con column-width se indica un ancho mínimo de las columnas. Usando las dos propiedades a la vez, el navegador web ajustará las columnas en función de la anchura del elemento contenedor (padre).
La propiedad ‘column-count’
La propiedad CSS column-count permite indicar el número de columnas en las que queremos dividir el texto o los elementos que estén dentro de un contenedor determinado. Esta propiedad se aplica sobre el contenedor padre. Su valor será un número entero indicando el número máximo de columnas.
Como valor también puede contener la palabra clave auto, que es su valor por defecto. Si es automático, el número de columnas se determina teniendo en cuenta el valor de otras propiedades, como column-width.
Código CSS:
.contenedor {
column-count: 2;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tal y como se puede observar, el párrafo se ha dividido en dos columnas, que por defecto tienen la misma anchura.
La propiedad ‘column-width’
Con la propiedad CSS column-width se establece el ancho ideal de las columnas. Con esta propiedad, el contenedor tendrá tantas columnas como pueda caber sin que ninguna de ellas tenga un ancho menor que el valor indicado.
Pero, ¿qué ocurre si el ancho del contenedor es más estrecho que el ancho de columnas especificado? Si esto sucede, el ancho de la única columna será menor que el ancho especificado para las columnas.
La propiedad column-width admite valores numéricos en unidades de longitud, que pueden ser relativas o absolutas; aunque no acepta porcentajes. Su valor por defecto es auto. En caso de que el valor sea automático, el número de columnas se determinará según el valor de column-count.
Cuando se indica una anchura, este será el tamaño mínimo de las columnas. Por ejemplo, si se fijan en 150 píxeles (150px), nunca serán más pequeñas de lo indicado. En caso de reducirse el tamaño del contenedor, se elimina una columna y las que quedan se hacen más anchas; el espacio libre se reparte.
Código CSS:
.contenedor {
column-width: 150px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Al indicar un ancho de 150 píxeles, se crearán tantas columnas como haga falta dependiendo de la anchura del contenedor. Esto tiene grandes ventajas en el diseño web responsive: en pantallas grandes el texto se distribuirá en varias columnas, mientras que en móviles solo se verá una columna.
La propiedad ‘columns’
La propiedad columns es una abreviatura (shorthand) que unifica la funcionalidad de column-count y column-width en una sola. Primero se define el valor del ancho y luego el número de columnas. Si se ha introducido un valor sin unidad se interpreta como el número total de columnas.
El funcionamiento de esta propiedad es bastante sencillo: con el ancho de las columnas se está indicando el ancho mínimo de cada columna, mientras que el número de columnas indica un máximo de columnas. El contenido se distribuirá de forma automática dependiendo del tamaño del contenedor.
Por ejemplo:
.contenedor {
columns: 150px 3;
}
Separación de columnas
Con CSS también se puede modificar el diseño del espacio o separación que queda entre las columnas. Además de cambiar la distancia, es posible añadir una regla vertical de columnas, con un color y un estilo propio.
La propiedad ‘column-gap’
La propiedad column-gap permite establecer un tamaño de separación entre columnas. Esta propiedad se describe con detalle en el artículo sobre separación (huecos) entre elementos, ya que es usado en el método de diseño de cajas flexibles (flex) y en el sistema de cuadrículas (grid).
En esta propiedad se indica el tamaño de la separación entre las columnas. Por defecto en este aso, se usa 1em. Para los demás sistemas comentados (cajas flexibles y cuadrículas), su valor por defecto será 0. Los valores numéricos admitidos pueden ser unidades de longitud relativas o absolutas, y deben ser positivos. Por ejemplo: 10px, 3em o 2cm.
Código CSS:
.contenedor {
column-count: 2;
column-gap: 30px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
En este ejemplo se observa dos columnas con una separación de 30 píxeles.
La propiedad ‘column-rule-style’
Para visualizar la regla vertical de columnas, el primer paso es utilizar la propiedad CSS column-rule-style. Los estilos se definen a través de palabras clave, y son las mismas que se utiliza para definir el estilo de los bordes.
| Valor | Descripción |
|---|---|
none | Valor por defecto. No muestra ninguna regla. |
hidden | Regla oculta. No se muestra pero está ahí. |
solid | Regla de un solo color (línea continua). |
double | Regla de doble línea continua. |
dotted | Regla de línea punteada (discontinua). |
dashed | Regla de línea rayada (discontinua). |
groove | Regla biselada con luz desde arriba. |
ridge | Regla biselada con luz desde abajo. |
inset | Regla 3D con profundidad hacia dentro. |
outset | Regla 3D con profundidad hacia fuera. |
A continuación se muestra un ejemplo usando la propiedad column-rule-style para definir una regla vertical de columnas con el estilo double.
Código CSS:
.contenedor {
column-count: 2;
column-gap: 30px;
column-rule-style: double;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
La propiedad ‘column-rule-color’
La propiedad column-rule-color permite modificar el color de la regla vertical de columnas. Solo puede indicarse un color, que se aplicará en todas las reglas por igual. El color se indica mediante palabras clave, con código hexadecimal o mediante las funciones de los modelos de color RGB y HSL.
Algunos ejemplos de código CSS:
div { column-rule-color: teal; }
div { column-rule-color: #ff7f2a; }
div { column-rule-color: rgb(120, 150, 0); }
La propiedad ‘column-rule-width’
Con la propiedad column-rule-width se indica el grosor de la línea vertical. Como valor admite unidades de longitud relativas o absolutas. También puede usarse las palabras clave thin (delgado), medium (normal) y thick (ancho), pero el grosor puede verse diferente en los distintos navegadores web.
Algunos ejemplos de código CSS:
div { column-rule-width: 30px; }
div { column-rule-width: 2em; }
div { column-rule-width: thick; }
Cabe señalar que el grosor de la regla no altera la separación entre columnas. Cuando se crea una regla, el valor indicado en column-gaps queda dividido a ambos lados de la regla de columnas.
La propiedad ‘column-rule’
La propiedad column-rule es una abreviatura (shorthand) que permite unificar las tres propiedades que definen las reglas verticales de columnas. El orden de los parámetros es indiferente, ya que los navegadores web diferencian las unidades de longitud de las palabras clave para el estilizado de la regla y su color.
Código CSS:
.contenedor {
column-count: 2;
column-gap: 30px;
column-rule: teal dotted 3px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Distribución del contenido en columnas
Otra particularidad de CSS cuando se trabaja con columnas es la capacidad de distribuir el contenido entre ellas. Para ello existe un par de propiedades que permiten que algunos algunos elementos se extiendan por encima de todas las columnas y controlar la distribución del contenido entre ellas.
La propiedad ‘column-span’
La propiedad CSS column-span permite que un elemento se extienda, de forma literal, por encima de las demás columnas. Por defecto, los elementos hijos de una columna se ajustan al ancho de columna. Esto se puede cambiar. A diferencia de las otras, esta propiedad se aplica sobre los elementos hijos.
Lista de valores:
| Valor | Descripción |
|---|---|
none | El elemento no se extiende. Valor por defecto. |
all | El elemento se extiende por encima de las columnas. |
Vamos a ver un ejemplo introduciendo una línea horizontal (elemento HTML <hr>), indicando que debe extenderse por encima de todas las columnas. La estructura HTML consta de dos párrafos con la línea horizontal en el medio.
Código HTML:
<div class="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<hr>
<p>Laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt.</p>
</div>
Código CSS:
.contenedor {
column-count: 2;
column-rule: double;
}
.contenedor hr {
border-bottom: 1px dashed red;
column-span: all;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt.
En este ejemplo se observa como la línea horizontal, en rojo, se ha extendido hasta ambos laterales del elemento contenedor. El primer párrafo se ha dividido en dos columnas por encima de la línea horizontal, mientras que el segundo párrafo se ha dividido en columnas por debajo de la línea.
La propiedad ‘column-fill’
Mediante la propiedad column-fill se puede controlar el reparto del contenido entre las columnas. Esta propiedad se aplica directamente sobre el elemento padre, y como valor admite una serie de palabras clave.
Lista de valores:
| Valor | Descripción |
|---|---|
auto | El contenido ocupa el espacio que necesita. |
balance | El contenido se reparte de forma equitativa. |
Con el valor auto, el contenido solo ocupará el espacio necesario, por lo que es probable que algunas columnas queden vacías. El valor balance hará un reparto equilibrado del contenido entre las columnas, y es el valor por defecto.
Código CSS:
.contenedor {
column-count: 2;
column-rule: 1px solid #ff7f2a;
column-gap: 15px;
}
.auto {
column-fill: auto;
}
.rep {
column-fill: balance;
}
Resultado con valor auto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Resultado con valor balance:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
No todos los navegadores web muestran el resultado de column-fill de la misma manera. Hay problemas de compatibilidad. Es probable que en Google Chrome, los dos resultados se vean idénticos.
