Las nuevas propiedades para Columnas con CSS3

Tweet

Cuando nos toca realizar armados de sitios webs (o páginas) con mucho contenido y no queremos hacer la lectura tan dificultosa y tampoco perder estética en un sitio, pensabamos de inmediato en columnas, al igual que lo hacen los periódicos.

Con esta idea en la cabeza, comenzaban las posibles soluciones:

- La primera era distribuir el contenido en tablas, pero las tablas no son tan buenas hoy en dia (de hecho diseñadores se “marean” tratando de entender su extenso funcionamiento).

- La segunda opción era crear los divs necesarios para distribuir la información, pero eso requiere que los divs se les aplique el CSS necesario para que se acomode como queremos. Es decir deberiamos crear 2 o 3 divs diferentes, lo cual es más trabajo, más demoroso y más peso en el archivo HTML como en el CSS.

Antes de CSS3 esas eran las dos alternativas. Lo bueno es que ya muchos navegadores aguantan esta nueva propiedad de CSS3, que son llamadas “Column-Count” y “Column-Width”. Todo es muy sencillo, tal como agregar unas pocas lineas de código en el CSS y listo. La sintaxis es fácil por ejemplo veamos lo siguiente:

Ahora, tenemos más opciones para personalizar todo esto. Como el espacio entre las columnas se crea con “column-gap: espacio (en px o em);”, y las barras laterales con “column:rule: numero_grosor tipo_linea color;”. ¿No esta claro? otro ejemplo:

Si con esto aún no te queda claro aqui explicare con una demo de esta propiedad, vamos primero con el CSS.

<style type="text/css">
<!--
h1 {
	font-family: Arial, Helvetica, sans-serif;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	font-weight: bold;
	font-size: 28px;
	color: #CC0000;
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 10px;
}
#multi-column1 {
	column-count: 3; /* Cantidad de Columnas que deseamos */
	-moz-column-count: 3; /* Cantidad de Columnas que deseamos para Mozilla */
	-webkit-column-count: 3; /* Cantidad de Columnas que deseamos para Webkit */

	column-gap: 25px; /* Espacio entre las columnas */
	-moz-column-gap: 25px; /* Espacio entre las columnas para Mozilla */
	-webkit-column-gap: 25px; /* Espacio entre las columnas para Webkit */

	column-rule: 2px solid #9c9c9c; /* Linea vertical divisoria entre columnas */
	-moz-column-rule: 2px solid #9c9c9c; /* Linea vertical divisoria entre columnas para Mozilla */
	-webkit-column-rule: 2px solid #9c9c9c; /* Linea vertical divisoria entre columnas para Webkit */

	width: 700px;
	background-color: #F7F7F7;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
}
#multi-column1 p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 18px;
	margin-left: 0px;
}
#multi-column2 {
	column-width: 260px; /* Columnas determinadas por un ancho especifico */
  	-moz-column-width: 260px; /* Columnas determinadas por un ancho especifico para Mozilla */
	-webkit-column-width: 260px; /* Columnas determinadas por un ancho especifico para Webkit */

	column-gap: 25px; /* Espacio entre las columnas */
	-moz-column-gap: 25px; /* Espacio entre las columnas para Mozilla */
	-webkit-column-gap: 25px; /* Espacio entre las columnas para Webkit */

	column-rule: 2px solid #9c9c9c; /* Linea vertical divisoria entre columnas */
	-moz-column-rule: 2px solid #9c9c9c; /* Linea vertical divisoria entre columnas para Mozilla */
	-webkit-column-rule: 2px solid #9c9c9c; /* Linea vertical divisoria entre columnas para Webkit */

	width: 700px;
	background-color: #F7F7F7;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
}
#multi-column2 p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 18px;
	margin-left: 0px;
}
-->
</style>

Ahora vamos con el HTML:

<!--PRIMERA PRIMERA DEMO-->
<h1>Con propiedad CSS - "Column-count"</h1>
<div id="multi-column1">
  <p><strong>Esteban Paredes, delantero y figura de Colo Colo, se refirió en duros términos a la iniciativa de la Universidad de Chile</strong> de usar camisetas conmemorativas al récord de nueve partidos invictos en el arranque de Torneo. <strong>En opinión del ariete, la movida fue algo “ilógico</strong>“, pues el equipo “laico” no ha ganado aún nada en concreto.</p>

  <p><strong>El capitán “azul”, José Rojas, salió al paso de las declaraciones,</strong> y quiso poner mesura para no agrandar la polémica con el archirrival. <strong>“Era   la manera de demostrar la alegría que teníamos. No es momento de   calentar el clásico. La virtud de este plantel es hablar de los partidos   que vienen y en este momento es Wanderers, no Colo Colo. Esas palabras   no llegan”</strong>, sostuvo el “Pepe”.</p>
  <p>A su vez, el zaguero comentó sobre los dichos del DT nacional,   Claudio Borghi, que dejó abierta la posibilidad de una futura citación   para Johnny Herrera.<strong> ”Feliz por esas declaraciones, todos   sabemos lo que está dando Jhonny, y no sólo él, sino que todos los   jugadores de la ‘U’. Todos queremos una chance de estar en la selección”</strong>, complementó.</p>
  <p>Finalmente, el hombre de la jineta entregó sus impresiones sobre el   duelo que sostendrán este miércoles a las 18:00 horas ante Santiago   Wanderers por la décima fecha del Clausura en Playa Ancha. <strong>“Tienen   jugadores desequilibrantes de mitad de campo hacia arriba. Para ganar   los partidos no te puedes descuidar ni un minuto y eso lo hemos   trabajado para enfrentar el partido de mañana”</strong>, finalizó.</p>

</div>
<!--FIN PRIMERA DEMO-->

<!--SEGUNDA DEMO-->
<h1>Con propiedad CSS - "Column-width"</h1>
<div id="multi-column2">
  <p><strong>Esteban Paredes, delantero y figura de Colo Colo, se refirió en duros términos a la iniciativa de la Universidad de Chile</strong> de usar camisetas conmemorativas al récord de nueve partidos invictos en el arranque de Torneo. <strong>En opinión del ariete, la movida fue algo “ilógico</strong>“, pues el equipo “laico” no ha ganado aún nada en concreto.</p>
  <p><strong>El capitán “azul”, José Rojas, salió al paso de las declaraciones,</strong> y quiso poner mesura para no agrandar la polémica con el archirrival. <strong>“Era   la manera de demostrar la alegría que teníamos. No es momento de   calentar el clásico. La virtud de este plantel es hablar de los partidos   que vienen y en este momento es Wanderers, no Colo Colo. Esas palabras   no llegan”</strong>, sostuvo el “Pepe”.</p>

  <p>A su vez, el zaguero comentó sobre los dichos del DT nacional,   Claudio Borghi, que dejó abierta la posibilidad de una futura citación   para Johnny Herrera.<strong> ”Feliz por esas declaraciones, todos   sabemos lo que está dando Jhonny, y no sólo él, sino que todos los   jugadores de la ‘U’. Todos queremos una chance de estar en la selección”</strong>, complementó.</p>
  <p>Finalmente, el hombre de la jineta entregó sus impresiones sobre el   duelo que sostendrán este miércoles a las 18:00 horas ante Santiago   Wanderers por la décima fecha del Clausura en Playa Ancha. <strong>“Tienen   jugadores desequilibrantes de mitad de campo hacia arriba. Para ganar   los partidos no te puedes descuidar ni un minuto y eso lo hemos   trabajado para enfrentar el partido de mañana”</strong>, finalizó.</p>
</div>
<!--FIN SEGUNDA DEMO-->