Columnas múltiples

facebook-svg gplus-svg twitter-svg

En CSS3 podemos crear fácilmente varias columnas de texto, como las de los periódicos. ( Dicen los expertos que las columnas mejoran la legibilidad del texto. )
A continuación algunas propiedades para crear columnas múltiples en CSS3:

Propiedad Sintaxis Descripción
column-count column-count: número | auto Especifica el número de columnas
column-gap column-gap: tamaño | normal Especifica el tamaño ( px, em, etc…) del espacio entre columnas.
column-rule column-rule: column-rule-width column-rule-style column-rule-color Método abreviado para establecer las propiedades del separador entre columnas.
column-rule-color column-rule-color: color Establece el color del separador entre columnas.
column-rule-style column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; Establece el estilo del separador entre columnas.
column-rule-width column-rule-width: medium | thin | thick | anchura; Especifica la anchura del separador entre columnas.
column-span  column-span: 1 | all; Establece si un elemento puede extenderse a lo largo de varias columnas.
column-width column-width: anchura | auto; Sugiere la anchura optima de las columnas.
columns columns: column-width column-count Método abreviado para establecer las propiedades column-width y column-count

OJO: Hay que preceder todas estas propiedades con los prefijos ( vendor prefixes ) correspondientes ( -webkit-, -moz- ... ).

Podemos crear un layout de columnas múltiples en CSS3 especificando la anchura de las columnas o especificando el número de columnas.

Especificando el número de columnas ( La propiedad column-count )

La propiedad column-count ( número de columnas ) nos permite crear un layout de columnas especificando el número de columnas del layout. En este caso queremos que el elemento .multiple tenga 2 columnas.

.multiple {
  -webkit-column-count : 2;
  -moz-column-count : 2;
   column-count : 2;
  }
.multiple {
  -webkit-column-count :2;
  -moz-column-count : 2;
   column-count : 2;
  -webkit-column-gap : 3em;
  -moz-column-gap : 3em;
  column-gap : 3em;
  width:100%;
  }

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, lentejas 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.

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, lentejas 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.

En este caso el número de columnas queda fijo aunque cambia la anchura de pagina. Es recomendable utilizar media queries para cambiar el nímero de columnas.

Especificando el ancho de columna ( La propiedad column-width )

La propiedad column-width ( ancho de columnas ) sugiere la anchura optima de las columnas. El navegador volverá a calcular el ancho de columna teniendo en cuenta el valor de column-width. Si utilizamos esta propiedad sin indicar el número de columnas, el CSS generará un numero variable de columnas dependiendo de la anchura del elemento padre.

  .anchura { 
   -webkit-column-width : 300px;    
   -moz-column-width : 300px;
   column-width : 300px;  
}
.anchura {
 -webkit-column-width : 300px;	
 -moz-column-width : 300px;
 column-width : 300px;
 -webkit-column-gap : 1em;
 -moz-column-gap :1em; 
 column-gap : 1em;
 }

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, lentejas 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.

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, lentejas 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.

Especificando tanto el ancho de columna como el numero de columnas

Podemos especificar las dos propiedades (column-width y column-count) a la vez. En este caso column-count indica el numero máximo de columnas. Así que especificando:

column-width:200px;
column-count:3;

nunca voy a tener más de 3 columnas aunque la anchura de la página lo permita. Sin embargo a anchuras muy pequeñas de pagina voy a tener menos de 3 columnas para respectar la anchura de columna ( column-width ) especificada.

La propiedad column-gap ( espaciado de columnas )

La propiedad column-gap ( espaciado de columnas ) especifica el tamaño del espacio entre columnas. En el ejemplo anterior hemos establecido una distancia entre columnas de 3em.

.multiple {
  -webkit-column-count : 2;
  -moz-column-count : 2;
   column-count : 2;
  -moz-column-gap : 3em;
  -webkit-column-gap : 3em;
  column-gap : 3em;
  }

Si no especificamos el valor de column-gap el navegador establece por defecto un espaciado de columnas de 1em y es equivalente a column-gap: normal.

La propiedad column-rule ( borde entre columnas )

Podemos separar las columnas con una raya vertical utilizando la propiedad column-rule ( borde o separador entre columnas ). Esta propiedad toma los mismos valores que outline.

.borde {
   -moz-column-rule : 1px solid #d9d9d9;
   -webkit-column-rule : 1px solid #d9d9d9;
   column-rule : 1px solid #d9d9d9;
   }

Exactamente como outline, la propiedad column-rule especifica de manera abreviada las características del borde entre columnas. Si queremos, podemos desglosar utilizando column-rule-color ( para especificar el color ), column-rule-style ( para especificar el estilo de línea ) y column-rule-width ( para especificar la anchura del borde ).

.borde {
  -moz-column-rule: 1px solid #d9d9d9;
  -webkit-column-rule: 1px solid #d9d9d9;
  column-rule: 1px solid #d9d9d9;
}
.multiple {
  -webkit-column-count :2;
  -moz-column-count : 2;
   column-count : 2;
  -webkit-column-gap : 3em;
  -moz-column-gap : 3em;
  column-gap : 3em;
  width:100%;
  }

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, lentejas 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.

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, lentejas 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.

La propiedad column-span ( extensión de columna )

La propiedad column-span hace que el texto se expanda en múltiples columnas ( column-span :all ) o en una sola ( column-span:1 ). En el siguiente ejemplo hago que un encabezado se extienda sobre todas las columnas utilizando la propiedad column-span :all.

.spanAll {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  text-align: center;
}
.multiple {
  -webkit-column-count :2;
  -moz-column-count : 2;
   column-count : 2;
  -webkit-column-gap : 3em;
  -moz-column-gap : 3em;
  column-gap : 3em;
  width:100%;
  }

Test column-span:all

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, lentejas 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.

Test column-span:all

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, lentejas 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.

A veces necesitamos que una imagen se extienda solo sobre una columna. Podrías pensar que column-span :1 es lo que hay que utilizar. Pero no! La imagen queda recortada. La solución es utilizar:

img{max-width:100%;}

Asimismo si queremos que la imagen se extienda sobre todas las columnas podemos utilizar column-span :all;.

Y no, no es posible hacer que una imagen se extienda solo sobre parte de las columnas, como por ejemplo sobre 2 columnas de 3.

.multiple3 {
 -webkit-column-count :4;
 -moz-column-count : 4;
 column-count : 4;
 column-gap : 2em;
 text-align:justify;
 }
 .multiple3 img{
 max-width:100%;
 }

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, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

Quijote

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 llama Quijana; pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad.

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, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

Quijote

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 llama Quijana; pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad.

Maquetación al estilo Pinterest

La maquetación al estilo Pinterest es mucho más complicada que esto, pero es interesante saber que se puede conseguir algo parecido utilizando solo CSS. Para ser más exactos, columnas.

Vea un ejemplo básico de maquetación con columnas
Vea una demonstración mucho más elaborada en Codepen