Cómo hacer columnas con CSS 3

Un problema que tienen los desarrolladores al crear un sitio web es el uso de columnas en el texto. Principalmente las columnas se hacen utilizando javascript o jQuery para poder dividir el texto en diferentes divisiones o columnas, asignarles el ancho y ponerles el estilo float:left.

Ahora ya se pueden usar columnas de una manera muy sencilla gracias a CSS3; ahora tenemos nuevas propiedades que nos permiten trabajar con columnas. Es posible especificar el número de columnas que necesitamos y el navegador va a asignar automáticamente el ancho de cada columna para que quepa la cantidad que especificamos, otra manera de trabajar con columnas con CSS3 es especificando el ancho de las columnas y se crearán las columnas que quepan de ese ancho; además se pueden especificar el margen entre cada columna, así como definir que haya una especie de borde que separe las columnas.

Como con la mayoría de las propiedades de CSS3, necesitamos agregar prefijos específicos de cada servidor. Para los navegadores basados en Webkit como Safari o Chrome se necesita el prefijo -webkit-; para los navegadores de Mozilla, como Firefox, se necesita -moz-; para Opera se utiliza -o-. Esperemos que se adopte CSS3 como un estándar para ya no necesitar estos prefijos.

Como mencioné antes, podemos usar:

  • column-count
  • column-gap

1: column-count
Cuando se utilice column-count se va a especificar el número de columnas que se necesitan, y como se mencionó antes, el navegador va a dividir el contenido en el número de columnas especificadas. El navegador va a calcular el ancho de cada columna para que quepa dentro del espacio especificado, y además va a calcular el alto de las columnas.

.two-columns{ -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; column-count: 2; } 

2: column-width
La otra manera para especificar columnas es utilizar la propiedad column-width. Esta propiedad permite especificar el ancho de las columnas y el navegador va a calcular la cantidad de columnas que caben en el espacio asignado, y calculará el alto de dichas columnas.

.columns-width{ -moz-column-width: 100px; -webkit-column-width: 100px; -o-column-widht: 100px; column-width: 100px; } 

A parte de las dos propiedades para definer columnas, tenemos otras propiedades para dar un major estilo a las columnas:

  • column-gap
  • column-rule

La propiedad column-gap es utilizada para especificar como un margen entre cada columna y column-rule es como un borde entre cada columna y tiene las mismas propiedades que la propiedad border: width, color mediante el uso de los estilos column-rule-width, column-rule-color, and column-rule-style.

.two-columns{  -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; -o-column-gap: 20px; column-gap: 20px; } 

Existe otra propiedad para utilizar con las columnas. También se puede especificar la altura de cada columna. Se necesita utilizar la propiedad column-height, esta se debe usar con cuidado ya que las columnas no van a exceder esta altura y si el contenido no cabe en el espacio disponible el navegador va a agregar nuevas columnas haciendo que se salga del espacio especificado.

.column-height{ -moz-column-height: 200px; -webkit-column- height: 200px; -o-column-height: 200px; column-height: 200px; } 

Ejemplos:

http://edufk.site90.com/?q=blog/columns-css3#examples

 

Eduardo Flores

Diseñador de interfaces e interacción en Usaria, desarrollador de sitios web usando Drupal, PHP, jQuery, MySQL, CSS, CSS3, HTML y HTML5. Sígueme @edufk88 o visita mi sitio web personal.

Leave a Reply