Clicky

Cómo hacer columnas en CSS3

columnas romanas

CSS3 proporciona actualmente una forma de dar formato al texto en varias columnas

Con el aumento de la diversidad en los tamaños de monitor no es práctico el diseño de un solo bloque de texto que ocupa toda la anchura de la pantalla. La solución tradicional es la de dividir el texto en columnas manualmente, lo que es muy intensivo de tiempo, o dividir el texto dinámicamente con JavaScript, que no funciona universalmente. Además, esto es una cuestión de presentación, debemos ser capaces hacer el estilo con CSS sin el uso de sistemas de red.

CSS3 proporciona actualmente una forma de dar formato al texto en varias columnas, incluso da la posibilidad de establecer un canal - el espacio entre las columnas - de esta manera tenemos el control completo del sistema en lugar de marco o red estableciendo esas lagunas.

Lo mejor de todo, CSS3 degrada con gracia así que, si alguien navega en Netscape Navigator, el sitio no se rompe.

Compatibilidad con exploradores

Es importante tener en cuenta que, si bien todos los navegadores actuales soportan múltiples columnas en CSS3 - sí, incluso IE10 - muchas versiones recientes IE9 - por ejemplo - no lo hacen. A pesar de que el soporte es bueno, querrás incluir los prefijos del navegador para webkit (-webkit-) y Mozilla (-moz-). No hay necesidad de incluir-ms- o -o- para IE y Opera, ya que o bien admiten la función en su totalidad, o nada en absoluto.

Las propiedades

Esta característica actual de CSS nos da un puñado de propiedades para un control total sobre cómo se imprime el contenido en el navegador y las propiedades son:

column-count:  aquí se especifica el número de columnas que desea aplicar al elemento.
column-width:  el ancho de una sola columna. Ten en cuenta que este valor probablemente será cambiado por el navegador.
column-gap:  el ancho del espacio entre las columnas.
column-rule-width:  la parte de la regla es una especie de frontera para las columnas y aquí se especifica el ancho de la frontera.
column-tule-style:  también como la frontera, si es necesario especificar el estilo.
column-rule-color:  aquí el color de la regla.
column-span:  el valor de aquí le dirá al navegador el número de columnas que desea un elemento span, esto es bueno para los encabezados y funciona como colspan y rowspan  en tablas.

Con todas estas propiedades no creo que realmente se necesite nada más para tener el control total de nuestras columnas. Por supuesto que no son necesarias todas estas propiedades para que trabaje el diseño de varias columnas, en realidad sólo es necesaria la column-count, pero siempre se debe utilizar también column-gap para dar al texto un poco de espacio y no tener todas las columnas una encima de la otra.

Para poner esto en la práctica sólo se necesitan dos líneas de código:

/* Esto producirá un diseño de 3 columnas con una diferencia de 20 píxeles entre cada columna */ 
.cols3 {
  column-count: 3;
  column-gap: 20px;
}

Si también deseas aplicar una regla a las columnas, sólo tienes que añadir las propiedades adicionales:

/* Esto producirá un diseño de 3 columnas, un espacio de 20 píxeles entre cada columna y una regla de 1px negro solido */
.cols3 {
  column-count: 3;
  column-gap: 20px;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: #000;
}

Al igual que la propiedad border más común también se puede apilar el color, el estilo y el ancho en la misma línea, así:

.cols3 {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #000;
}

Si tienes un título y quieres abarque todas las columnas agregaremos una línea:

/* Esta h1 ocupará el espacio de las 3 columnas */
.cols3 h1{
  column-span: all;
}


Demo

Se puede aplicar esto a prácticamente cualquier HTML, a partir de un solo párrafo con múltiples <div>. He aquí una demostración:

Y aquí está el código completo para producir ese efecto:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>CSS3 column demo</title>
 <style type='text/css'>

 .cols3 {
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  -webkit-column-rule: 1px solid #000;

  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -moz-column-rule: 1px solid #000;

  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #000;
 }

 .cols3 h1 {
  -webkit-column-span:all;
  -moz-column-span:all;
  column-span:all;
 }

</style>
</head>
<body>

<div class='cols3'>

<h1>Integer posuere erat a ante</h1>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.</p>

<p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>

<p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor.</p>

</div>
</body>
</html>

Conclusión

Hacer columnas con CSS tiene un montón de ventajas, en mi opinión, no hay necesidad de hacer uso de una gran cantidad de matemáticas, flotadores o romper el contenido cuando se cambia de tamaño del navegador por el usuario. También tienes que escribir el código de una manera mucho más semántica y ya que lo soportan todos los principales navegadores se debe considerar el uso de columnas de ahora en adelante.

Jesus_Caceres