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. ) Para crear columnas múltiples en CSS3 podemos utilizar las siguientes propiedades:

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- ... ).

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

La propiedad column-count ( número de columnas ) especifica el número de columnas de un elemento. 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.

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 decidirá el valor de column-gap: normal. La especificación recomienda que el valor para la palabra clave normal sea de 1em.

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 border.

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

Exactamente como border, 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-width ( ancho de columnas )

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.

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 )

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

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