Columnas Multiples CSS3

La idea de diagramar contenido con columnas múltiples es ajustar el contenido para aumentar la capacidad del lector de seguir la misma línea de texto sin perderse en su continuidad. El texto de divide en varias columnas de menos ancho facilitando la comprensión del tema que se está tratando.

CSS3 incorpora nuevos atributos para que el navegador se encargue de producir contenido multicolumna, es decir, que maquete directamente los elementos en varias columnas sin tener que hacer nosotros nada.

En este artículo vamos a tratar como crear Columnas Multiples CSS3, una de las nuevas características que hoy en dia se encuentran disponibles.

Columnas Multiples CSS3, Uso del Atributo column-count

Numerosas publicaciones maquetan el texto en diversas columnas, como criterio de diseño y para facilitar la lectura. Podríamos imaginarnos el texto de los periódicos si no se encontrase dividido en diversas columnas ¿no sería casi imposible seguir las líneas para hacer una lectura cómoda de la información si todo estuviera en una única columna?

Para crear Columnas Multiples CSS3 utilizaremos varios atributos, que servirán para modelizar las columnas:

  • colum-count: la cantidad de columnas..
  • colum-width: servirá para definir la anchura de las distintas columnas a crear.
  • column-gap: nos permitirá definir el espacio en blanco entre columnas.
  • column-rule: servirá para crear un filete o línea divisoria entre las columnas.
<div id="contenedor">
<div id="columnas">
    <div class="unidad">
        <img src="pic1.jpg" alt="alt" />
        <p>Algo de texto sobre la imagen</p>
    </div>
 
    <!-- Nº indeterminado de cajas-->  
    <div class="unidad">
        <img src="img2.jpg" alt="alt" />
        <p>Texto relativo y descriptivo de la imagen</p>
    </div>
</div>

La distribución homogénea en la horizontal de elementos no reviste mayor problema. Un simple flotado (declarando anchura) es suficiente. El problema surge cuando se desconoce a priori el contenido y este puede variar. Es entonces cuando surgen los problemas. Debido al flujo de los elementos lo normal es que ocurra lo de la imagen:

flotados_css

Nada encaja. Surgen grandes espacios en blanco entre una fila y la siguiente.

Normalmente la solucción pasa por el uso de javascript, hay librerías propias para ello. Pero a costa de calcular en vivo el tamaño de cada uno de los elementos y posicionarlos de forma absoluta.

El resultado sería el de la imagen de abajo y el que vamos a realizar con puro Css:

columnas_css

Solución Css: La propiedad column

Para lograr lo mismo con puro Css tenemos las propiedades column-count que declaramos en el div padre y a éste lo colocamos dentro de un contenedor general #contenedor sólo a efectos de dar ciertas medidas. De este último podríamos prescindir.

#contenedor {
   width: 90%;
   max-width: 1170px;
   min-width: 800px;
   margin: 50px auto;
}
#columnas {
   column-count: 5;
   column-gap: 15px;
   column-fill: auto;
}

column-count indica el número de columnas que se generan. column-gap la separación entre ellas y column-fill la forma como se realiza el llenado de cada una, balanceado o no.

La propiedad column-break-inside

Para evitar el reparto del contenido de un elemento entre dos columnas hay que declarar la propiedad column-break-inside: avoid. Se declara no en el contenedor que crea las columnas sino en los unidades interiores que se apilan en columnas, junto al resto de propiedades para estilizarlo:

.unidad {
   column-break-inside: avoid;
   background: #E9EBED;
   border: 2px solid #FFFFFF;
   box-shadow: 0 1px 3px rgba(20,20,20, 0.4);
   display: inline-block;
   margin: 0 5px 20px;
   padding: 10px;
}

Con lo anterior casi está, sólo tenemos que forzar a las imágenes para que no rompan la estructura y apariencia. Para ello basta con declararles un tamaño:

.unidad img {
   width: 100%;
}

Recuerda que el % no se calcula sobre el tamaño original de la imagen sino sobre la anchura del div que la contiene

Puede ver el articulo orginal en el siguiente enlace: Columnas Multiples CSS3

Suscribir
Notificar a
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios