Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=9c88b0dc-7dea-4f84-859c-0a5fdbee646e

Un vistazo a las columnas responsive en HTML5 y CSS3

columnas-html5-css3-cabecera

Una de las cosas que más echábamos de menos los diseñadores al pasarnos de print a web en épocas pretéritas, era la posibilidad de dividir el texto en columnas.

Por suerte, todo esto cambió con la llegada de CSS3. Usando CSS3 tenemos la posibilidad de organizar los contenidos de una página web en columnas sin tener que crear elementos HTML extra, algo muy útil si estamos maquetando una web con mucho contenido o donde la longitud de línea nos pueda quedar demasiado grande (como periódicos o revistas digitales). Antes, hacer esto era totalmente impensable sin la ayuda de JavaScript.

Tener esta posibilidad de dividir los contenidos en columnas nos abre un mundo de posibilidades para jugar con el layout de los contenidos sin tener que rompernos demasiado la cabeza. Por otro lado, hay que tener cuidado con la altura final del contenido, porque la experiencia del usuario se puede degradar al tener que ir haciendo scroll de arriba para bajo para poder leer todo.

Por cierto, hablamos de columnas en los contenidos. Para organizar la maquetación general de la página hay otras técnicas más adecuadas, como crear un grid responsive a base de floats, o usar técnicas como Flexbox o CSS Grid Layout. Y si no, siempre te quedará Bootstrap o frameworks CSS similares.

Al grano: las columnas en HTML y CSS

La especificación que marca las directrices para el uso de columnas todavía es una candidata a recomendación y sólo está implementada en Internet Explorer y EDGE. ¿Qué? Esto sí que no te lo esperabas, ¿verdad? Pero no pasa nada, porque lo podremos usar en Firefox y Chrome tirando de prefijos propietarios (los clásicos –moz y –webkit). Además, verás que esta técnica es muy fácil de implementar en webs responsive y degrada estupendamente.

Pero lo mejor, como siempre, es verlo en acción. Así es más sencillo hacerse una idea. Por ejemplo, tenemos una página web que es un simple elemento main (que no es más que un div, pero más semántico) y dentro de él tenemos un título h1, varios párrafos, un subtítulo h2 en medio del contenido y una imagen.

No te preocupes por el código, al final del post te podrás descargar todos los ejemplos.

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Columnas múltiples en CSS3 - campusMVP.es</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="Stylesheet" href="common.css" />
</head>
<body>
    <main>
        <h1>Columnas múltiples en CSS3</h1>
        <p>Lorem ipsum dolor sit amet....</p>
<p><img src="imagen.png" alt="Curso de HTML5 y CSS3 en campusMVP"> Nunc iaculis laoreet...</p> <p>Nulla facilisi. Pellentesque ...</p> <h2>Subtítulo en medio del contenido</h2> <p>Nam sed est commodo orci blandit maximus...</p> </main> </body> </html>

Esta página se ve así en Chrome:

multicolumna-css-ejemplo01

Ahora, simplemente añadiéndole la propiedad column-count:4; al elemento contenedor tendremos todo el contenido dividido en 4 columnas.

main {
            -webkit-column-count:4;
            -moz-column-count:4;
            column-count:4;
        }

Obviamente, en el valor de la propiedad column-count indicaremos el nº de columnas deseadas:

multicolumna-css-ejemplo02

 Así a bote pronto está genial, pero nos surgen un par de inconvenientes

  1. El título y el subtítulo nos aparecen dentro de 1 columna. Bueno, el subtítulo puede ir así, pero el título... 
  2. Lo mismo nos ocurre con la imagen, que ahora se ve muy pequeñita

Además, en un móvil también se vería muy pequeño el contenido al dividirlo en cuatro columnas:

multicolumna-css-movil

 ¡Tranquilidad! ¡Que no panda el cúnico! Todo esto lo podemos solucionar.

Expandiendo el contenido en varias columnas

Al título del contenido y a la imagen le vamos a aplicar la propiedad column-span:all;, de esta forma se expandirán hasta ocupar el total del ancho que ocupan todas las columnas:

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

        img {
            display:block;
            -webkit-column-span:all;
            -moz-column-span:all;
            column-span:all;
        }

¡Ojo! A la imagen hay que añadirle un display-block; porque la propiedad column-span sólo se aplica a elementos de bloque.

Una vez hecho esto, nuestra página nos quedaría así:

multicolumna-css-ejemplo03

Lo que NO se puede hacer, y a mi me parecería ideal, sería poder indicar en  column-span  el número máximo de columnas a ocupar por un elemento, algo parecido a la atributo colspan en las celdas de las tablas. Ojalá algún día se implemente algo así.

Manejando el espacio entre las columnas

Otra cosa que podemos hacer con nuestras columnas es definir el espacio entre columnas (usando column-gap) o incluso ponerle un filete separador (una línea entre las columnas) con la propiedad column-rule (sin olvidarnos de los prefijos):

main {
            -webkit-column-count:4;
            -moz-column-count:4;
            column-count:4;

            -moz-column-gap: 3em;
	    -webkit-column-gap: 3em;
	    column-gap: 3em;

	    -moz-column-rule: 1px solid #bbb;
	    -webkit-column-rule: 1px solid #bbb;
	    column-rule: 1px solid #bbb;

        }

 

multicolumna-css-ejemplo04

¿Y qué hacemos con las columnas en el móvil?

Ya sólo nos queda el toque final. Antes vimos que las columnas en el móvil nos quedarían demasiado estrechas. Pues bien, basta con darles un ancho mínimo a las columnas usando la propiedad column-width para que nuestro contenido se vaya adaptando al espacio disponible. En este caso el navegador colocará todas las columnas que pueda con ese ancho mínimo, hasta un máximo de 4, que es el valor que le hemos dado a column-count.

main {
            -webkit-column-count:4;
            -moz-column-count:4;
            column-count:4;

            -moz-column-gap: 3em;
	    -webkit-column-gap: 3em;
	    column-gap: 3em;

	    -moz-column-rule: 1px solid #bbb;
	    -webkit-column-rule: 1px solid #bbb;
	    column-rule: 1px solid #bbb;

            -moz-column-width: 140px;	        
	    -webkit-column-width: 140px;
	    column-width: 140px;
        }

Aquí lo puedes ver en acción, usando las herramientas para desarrolladores de Google Chrome para probar webs responsive:

columnas-html-responsive

Ya ves que con unas pocas reglas CSS hemos conseguido que la composición de nuestra página tenga más ritmo y mucha más vidilla, además de ser responsive y degradar perfectamente.

Espero que con esta pequeña introducción te haya picado la curiosidad lo suficiente, ya que nos hemos dejado otras propiedades como break-inside, break-before, break-after (para dar saltos de columna) o column-fill (para gestionar el reparto del contenido entre columnas) que también  te pueden interesar.

Mientras tanto, haciendo clic aquí puedes descargarte los ejemplos de este post para jugar un poco con las reglas que hemos visto.

Ya me contarás si te ha sido útil.

Fecha de publicación:
Pablo Iglesias Pablo Iglesias es diseñador en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web

No te pierdas nada, recibe lo mejor en tu email

Si te ha gustado este art­ículo, únete a miles de desarrolladores que ya reciben cada mes nuestro boletí­n por email. No te pierdas los mejores trucos, noticias y frikadas.

Enviamos poco, pero bueno. Palabra de desarrollador.

Suscríbete aquí­

Sí­guenos también en:

Telegram LinkedIn YouTube
La mejor formación online para desarrolladores como tú

Comentarios (3) -

venia todo perfecto hasta que por algún motivo no se me hacen responsive las columnas...puede que no sea compatible con la plantilla que estoy usando o con wordpress? gracias.

Responder

Pablo Iglesias
Pablo Iglesias

Hola Juan,

Podrían ser tantas cosas...

Yo primero comprobaría si tu navegador lo soporta. Y si no lo soporta ampliamente, me aseguraría de que los prefijos están bien puestos (y las clases o la id del elemento que quieres dividir en columnas).

También puedes pasarle el validador del W3C al HTML y CSS, a veces una llave "{" mal puesta o un div mal cerrado te puede traer fácilmente de cabeza un buen rato.

El hecho de usar Wordpress o no debería ser indiferente. Lo importante es si alguna regla CSS de la plantilla o de algún plugin está interfiriendo. Compruébalo con las "Herramientas de desarrollador" de tu navegador (F12)

Saludos

Responder

Domingo Gonzalez
Domingo Gonzalez

Saludos, Sabes que tengo un problema similar aprobecho la oportunidad para consultar,  tengo un archivo de texto separado por comas, el asunto es que al mostrar contenido en mi pagina las columnas que tiene mucho contenido matienen su tamaño en la horizontal sin embargo una columna que contine poca informacion no, se expande haciendo que mi web no se muestre de forma adeacuda.

basicamente imagina que tienes 3 variables

$a = "JUAN PERDOMO"
$b = "[email protected]"
$c = "AVENIDA PEDRO LEON TORRES CALLE 56 FRENTE A LUNAR PARK, CASA S/N BARQUISIMETO ESTADO LARA"

al mostrar estos datos en un tabla NO USE UN MAIN la colunma a tiene asignado por style un tamaño de 20% sobre el tamaño de la tabla la columna b tiene 20% y la columna C tiene un 60%. no se porque la columna B se expande mientras el resto respeta el ancho que le e indicado, sin embargo cuando a la columna b le asigno por ejemplo el valor de c o a, si mantiene el ancho indicado incluso cuando c tiene mas contenido, podrias ayudarme Gracias. Estoy usando HTML5 CSS Y BOOSTRAB 4

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.