Con solo unas pocas propiedades de CSS, puedes crear un diseño inspirado en prensa que tenga la flexibilidad de la web. Es como maquetar un periódico, pero a medida que el papel se haga más pequeño, las columnas se ajustarán y equilibrarán automáticamente, permitiendo que el contenido fluya naturalmente.
En la actualidad son poco conocidas y raramente utilizadas ya que sólo son admitidas y desplegadas en los navegadores basados en WebKit y en Mozilla.
Con este conjunto de propiedades conseguimos convertir una línea continua o un párrafo grande en varias columnas.
Para esto, en CSS3 tenemos las siguientes propiedades:
- column-count
- column-gap
- column-width
- column-rule
- column-rule-style
- column-rule-width
- column-rule-color
- column-span
- column-fill
- Texto en columnas con column-count
- Margen en texto a varias columnas con column-gap
- Columnas de ancho fijo con column-width
- Borde en texto a varias columnas con column-rule
- Cuántas columnas abarca un elemento
- Indicar cómo se llenan las columnas con column-fill
- Forma abreviada de las propiedades column-count y column-width
- Ejemplo de diseño web con columnas
Texto en columnas con column-count
Esta propiedad nos permite dividir el texto en varias columnas. El valor de esta propiedad es un número que indica el total de columnas a utilizar.
Dado el número de columnas, el navegador distribuirá uniformemente el contenido exactamente en ese número de columnas, variando el ancho de las mismas según el tamaño de la pantalla.
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}Lenguaje del código: PHP (php)Esta propiedad también se puede usar en la forma abreviada columns y se puede usar en conjunto con column-width. Cuando ambas propiedades se declaran, column-count indica el número máximo de columnas.
Margen en texto a varias columnas con column-gap
Por su parte, la propiedad column-gap sirve para especificar el espacio que existirá como separador entre cada columna. Si no se indica, el navegador establece el espacio para 1em. Su valor debe ser mayor o igual a 0.
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}Lenguaje del código: PHP (php)El valor para column-gap se indica en px, pt, rem, etc. Lo ideal sería utilizar rem.
A la hora de maquetar el texto en columnas, ten en cuenta que el espacio ocupado por column-gap empujará el contenido de las columnas.
Columnas de ancho fijo con column-width
La propiedad column-width establece el ancho mínimo de cada columna, ajustando el número de columnas en función del espacio disponible. Permite indicar un ancho de columna deseado, aunque su aplicación no será estricta si existe column-count, que establece un ancho basado en el número de columnas especificado.
Su valor por defecto es auto (el número de columnas derivará del establecido con column-count) y es aplicable a contenedores como elementos div, block, table, table-cell, etc.
El valor posible para esta propiedad es cualquier unidad de medida válida en CSS.
- En presencia de column-count, se puede omitir esta propiedad ya que column-count establece un ancho de columna basado en el número de columnas indicado.
- Puede entrar en conflicto con column-count si los valores indicados son incompatibles entre sí.
- En ausencia de column-count, define un número de columnas en base al ancho especificado.
Si te fijas, column-count y column-width son dos formas de expresar lo mismo.
Borde en texto a varias columnas con column-rule
¿Quieres poner un borde entre las diferentes columnas? Para eso tenemos column-rule, una propiedad que acepta como valor lo mismo que la propiedad border.
div {
-webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px double #ff00ff; /* Firefox */
column-rule: 4px double #ff00ff;
}Lenguaje del código: PHP (php)Esta propiedad permite establecer los valores de column-rule width, column-rule-style y column-rule-color en una sola línea.
div {
-webkit-column-rule-width: 4px;
-moz-column-rule-width: 4px;
column-rule-width: 4px;
-webkit-column-rule-style: double;
-moz-column-rule-style: double;
column-rule-style: double;
-webkit-column-rule-color: #ff00ff;
-moz-column-rule-color: #ff00ff;
column-rule-color: #ff00ff;
}Lenguaje del código: PHP (php)- column-rule-width funciona de forma análoga a border-width (valor por defecto medium, y valores posibles thin, medium, thick o una unidad de medida CSS válida).
- column-rule-style funciona de forma análoga a border-style.
- column-rule-color funciona de forma análoga a border-color.
Cuántas columnas abarca un elemento
La propiedad column-span especifica cuántas columnas debe abarcar un elemento.
El siguiente ejemplo especifica que el elemento <h2> ocupará todas las columnas:
h2 {
column-span: all;
}Lenguaje del código: PHP (php)Indicar cómo se llenan las columnas con column-fill
La propiedad column-fill especifica cómo llenar columnas, equilibradas o no.
Si estableces la altura de un elemento de varias columnas, puedes controlar cómo el contenido llena las columnas. El contenido puede ser balanceado o llenado secuencialmente.
.noticia1 {
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}
.noticia2 {
-moz-column-fill: balance; /* Firefox */
column-fill: balance;
}Lenguaje del código: PHP (php)Su sintaxis es: column-fill: balance|auto|initial|inherit;
- balance. Valor por defecto. Rellena cada columna con aproximadamente la misma cantidad de contenido, pero no permitirá que las columnas sean más altas que la altura (por lo tanto, las columnas pueden ser más cortas que la altura establecida a medida que el navegador distribuye el contenido de manera uniforme horizontalmente)
- auto. Llena cada columna hasta que alcanza la altura y lo hace hasta que se agota el contenido (por lo tanto, este valor no necesariamente rellenará todas las columnas ni las rellenará de manera uniforme)
Forma abreviada de las propiedades column-count y column-width
La propiedad columns se puede usar como shorthand de las propiedades column-count y column-width.
div {
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
}Lenguaje del código: PHP (php)La parte de column-width definirá el ancho mínimo para cada columna, mientras que la parte de column-count indicará el número máximo de columnas.
Al usar esta propiedad, el diseño de varias columnas se dividirá automáticamente en una sola columna con anchos de navegador estrechos, sin la necesidad de consultas de medios u otras reglas.
Ejemplo de diseño web con columnas
El ingenioso hidalgo don Quijote de la Mancha
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.
Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza.
Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque por conjeturas verosímiles se deja entender que se llamaba Quijana.
Pero esto importa poco a nuestro cuento: basta que en la narración dél no se salga un punto de la verdad.
Es, pues, de saber que este sobredicho hidalgo, los ratos que estaba ocioso -que eran los más del año-, se daba a leer libros de caballerías, con tanta afición y gusto que olvidó casi de todo punto el ejercicio de la caza, y aun la administración de su hacienda; y llegó a tanto su curiosidad y desatino en esto, que vendió muchas hanegas de tierra de sembradura para comprar libros de caballerías en que leer, y así, llevó a su casa todos cuantos pudo haber dellos.
Y, de todos, ningunos le parecían tan bien como los que compuso el famoso Feliciano de Silva, porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas; y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura. Y también cuando leía: Los altos cielos que de vuestra divinidad divinamente con las estrellas os fortifican, y os hacen merecedora del merecimiento que merece la vuestra grandeza.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ejemplo de diseño web con columnas</title>
<style type="text/css">
.contenedor-3cols {
word-wrap: break-word;
font-size: 1.5rem;
text-align: justify;
width: 90%;
margin: 10px auto;
padding: 10px;
line-height: 1.5em;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 2px solid #ff00ff;
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 2px solid #ff00ff;
column-count: 3;
column-gap: 20px;
column-rule: 2px solid #ff00ff;
}
.contenedor-3cols h4 {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
}
</style>
</head>
<body>
<div class="contenedor-3cols">
<h3>El ingenioso hidalgo don Quijote de la Mancha<br>(texto extraido de Quijotipsum)</h3>
<p> (Aquí pones el texto) </p>
</div>
</body>
</html>Lenguaje del código: PHP (php)Como habrás podido observar, es un método bastante sencillo y fácil de aplicar. No hay necesidad de complicarnos la vida con tablas, ni de utilizar métodos aún más arcaicos como el salto de línea ni los gifs transparentes para separar. Con esto tu código quedará limpio y claro.
