Advertisement
  1. Web Design
  2. CSS

Una introducción al módulo de diseño de múltiples columnas en CSS3

by
Read Time:10 minsLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

El módulo de diseño de columnas múltiples se ha introducido para ayudarnos a crear columnas de forma rápida y sencilla utilizando solo CSS3. En este tutorial voy a echar un vistazo a algunas de sus propiedades y las voy a demostrar a través de una serie de ejemplos.


Introducción

Cualquiera que haya intentado crear varias columnas en el pasado utilizando CSS ya sabrá que este tipo de diseño se ha podido lograr durante mucho tiempo. Sin embargo, esto a menudo ha resultado en el uso de flotadores y técnicas poco originales. La mayoría de las veces, esto no ha llevado mucho tiempo y definitivamente no es el diseño más fácil de crear. La verdad es que crear múltiples columnas usando CSS ha sido un proceso extremadamente incómodo hasta ahora. El módulo de diseño de varias columnas ofrece más flexibilidad y control sobre los métodos CSS anteriores.

El nuevo enfoque, que es una extensión del modelo de caja CSS actual, permite que el contenido se ejecute de una columna a otra y lo hace fácilmente adaptable para diferentes dispositivos de visualización y datos dinámicos.


Soporte del navegador

Bien, antes de entusiasmarte demasiado con este nuevo módulo, es importante comprender qué navegadores lo soportan, qué prefijos usar y algunas limitaciones del navegador.

Navegadores compatibles

  • IE10+
  • Firefox 5+
  • Chrome 12+
  • Safari 3.2+
  • Opera 11.1+

Tanto Chrome como Safari usan el prefijo '-webkit-'. Firefox usa el prefijo '-moz-'. Opera e IE admiten todas las propiedades sin necesidad de prefijo. Por alguna razón, Chrome, Safari y Firefox no admiten las propiedades de relleno de columnas o de separación, mientras que Safari y Firefox no admiten el intervalo de columnas. Dicho esto, estoy seguro de que estas propiedades pronto estarán disponibles en futuras actualizaciones.


Un ejemplo rápido

Antes de echar un vistazo a las propiedades utilizadas en el módulo de diseño de múltiples columnas, te mostraré un ejemplo rápido para ayudarte a comprender cómo funciona un poco más fácilmente.

Aquí hay una vista previa de cómo se renderizarán las columnas:

A simple example of the CSS3 multi column layout moduleA simple example of the CSS3 multi column layout moduleA simple example of the CSS3 multi column layout module

Primero, el html para este ejemplo es súper simple. Simplemente creamos un div con una clase 'columns' y un poco de texto ficticio lorem ipsum.

El módulo de diseños de varias columnas es bastante fácil de describir y comprender en CSS. He aquí un ejemplo:

Primero usamos 'column-count', para dictar cuántas columnas se necesitan (he usado 4 en este ejemplo).

Luego decimos qué tan grande queremos que sea el canalón (el espacio entre las columnas). En este caso he usado 10px.

Al agregar estas propiedades, permite que nuestro texto ficticio lorem ipsum fluya entre las 4 columnas. Realmente es así de sencillo comenzar. A estas alturas, deberías empezar a ver lo sencillo que es utilizarlo.


Propiedades de CSS

Echemos un vistazo con más detalle a algunas de las propiedades que se pueden encontrar en el módulo de diseño de varias columnas.

Número y ancho de columnas

Establecer el número o el ancho de las columnas es importante para el contenido del diseño de varias columnas. Las columnas deben establecerse usando 'column-width' o 'column-count', pero nunca deben usarse juntas. Ambas propiedades están configuradas de forma predeterminada en 'auto'.

Ancho de columna

CSS3 Multi Column WidthCSS3 Multi Column WidthCSS3 Multi Column Width

"Ancho de columna" hace exactamente lo que dice en la lata. Te permite especificar un ancho fijo para las columnas. La medida de este ancho se puede realizar de forma estándar usando px, ems, etc. Dependiendo de lo que ingreses para el ancho de la columna puede variar y puede ser un poco más ancho o más estrecho para adaptarse al espacio disponible. Si esta propiedad se establece en 'auto', esto significa que el ancho de las columnas lo dictarán otras propiedades, como la que se muestra a continuación.

Opciones de valor column-width: (longitud) | auto;

Recuento de columnas

Si deseas que el diseño se divida en varias columnas específicas, esta es la propiedad por la que deberías optar. Al establecer el valor de este, el contenido se divide en la cantidad requerida de columnas. Si esta propiedad se establece en 'auto', esto significa que el número de columnas se decidirá por otras propiedades, como 'column-width'.

Opciones de valor column-count: (número de columnas) | auto;

Columnas

'Columns' es efectivamente una propiedad abreviada que te permite establecer el 'ancho de columna' y el 'recuento de columnas'. Aquí hay una vista de valores válidos que puedes asociar con 'columns':

Espacio entre columnas

CSS3 Multi Column GapCSS3 Multi Column GapCSS3 Multi Column Gap

El 'espacio entre columnas' nos da la oportunidad de agregar un espacio entre cada una de las columnas y le da al contenido espacio para respirar. Especificamos el ancho del espacio usando medidas CSS estándar. El ancho del espacio que especifiques no puede ser negativo.

Opciones de valor column-gap: (longitud) | normal;

Regla de columna

CSS3 Multi Column RuleCSS3 Multi Column RuleCSS3 Multi Column Rule

La 'regla de la columna' coloca efectivamente un borde en el medio del 'espacio de la columna'. Por lo tanto, para habilitar esto, se debe especificar un ancho de 'espacio de columna' que tenga el mismo valor o mayor que la regla de columna. La regla de columna también tiene varias subpropiedades independientes, así como una versión abreviada. Esta versión abreviada funciona de la misma manera que la propiedad 'borde' de la abreviatura. Puedes ver esto a continuación:

Intervalo de columnas

CSS3 Multi Column spanCSS3 Multi Column spanCSS3 Multi Column span

'column-span' nos permite abarcar todas las columnas. Si tomamos nuestro ejemplo simple de antes y agregamos un título h1 a nuestro contenido, podemos hacer que esta etiqueta h1 abarque las 4 columnas completas agregando column-span: all. Echa un vistazo a esta demostración:

Opciones de valor: column-span: all | none;

Relleno de columnas

La propiedad 'column-fill' nos da dos controles para establecer cómo se equilibra la cantidad de contenido en las columnas. Si se establece en 'balance', la variación en la longitud de la columna se minimizará y todas las longitudes serán lo más iguales posible. Si se establece en 'auto', las columnas se llenarán en orden y (por ejemplo) puede resultar en que la cuarta de 4 columnas tenga menos contenido que las 3 columnas anteriores. Si se estableciera un equilibrio en esto, permitiría que las 4 columnas tuvieran aproximadamente la misma altura. Esta propiedad resuelve el problema de dejar huecos indeseables en el contenido.

Desbordamiento

El 'overflow' debe usarse para controlar lo que sucede si el contenido desborda las columnas. Si, por ejemplo, el div principal de 'columnas' tiene un ancho fijo y el contenido de las columnas se extiende, entonces podemos controlar si esto debe mostrarse o recortarse usando la propiedad 'overflow'.

En el siguiente ejemplo, podemos ver que las columnas desbordan el div. Esto se debe a que el desbordamiento no está configurado como 'oculto' en el elemento principal.

using overflow on css3 multi column layoutusing overflow on css3 multi column layoutusing overflow on css3 multi column layout

Ejemplo 1

El antiguo método para crear diseños de columnas múltiples

the original method of creating multiple columns using CSSthe original method of creating multiple columns using CSSthe original method of creating multiple columns using CSS

He reunido algunos ejemplos que puedes descargar en la parte superior de esta página. He hecho esto para mostrar cómo puedes usar este nuevo módulo en diferentes situaciones para que puedas ver lo fácil que es cambiar el diseño de tu código simplemente cambiando algunas propiedades en el marcado CSS.

Este primer ejemplo demuestra el método antiguo para crear múltiples columnas usando CSS3. Se ha logrado agregando un 'float:left' a la 'navegación', 'el contenido principal' y la 'barra lateral'.

Claro, esto funciona bien y puedes lograr el efecto deseado. Sin embargo, la flexibilidad está bastante restringida. Si deseas agregar columnas adicionales o cambiar el diseño, debes confiar en agregar marcas adicionales, mover elementos y puede ser bastante tedioso. Este nuevo módulo cambia todo eso.


Ejemplo 2

El nuevo método

css3 multi column layoutcss3 multi column layoutcss3 multi column layout

Este ejemplo anterior muestra el nuevo método para crear las columnas. Esta vez, en lugar de usarlo en los elementos del contenido principal, agregué el módulo de múltiples columnas CSS3 al 'contenido principal' donde puedes ver que el contenido se ha dividido en 3 columnas.

Para cambiar el número de columnas, es tan simple como cambiar un número.


Ejemplo 3

Otras características

css3 multi column layout other featurescss3 multi column layout other featurescss3 multi column layout other features

En este último ejemplo, seguí usándolo en el contenido principal, pero también agregué algunos divs adicionales para mostrar cómo puedes cambiar el diseño de manera bastante simple. También agregué 'span:all' a la etiqueta inferior 'h1' para que el título se extienda a lo largo de las columnas 'all'. Por último, le agregué una regla al incluir 'column-rule: 1px dotted # 999999;' al CSS.

Vale la pena señalar en este punto que también he incluido un respaldo de JavaScript en los ejemplos, para que funcionen en navegadores que aún no son compatibles con el módulo de diseño de múltiples columnas.


Retrocesos

Como con cualquier módulo CSS nuevo; los juguetes nuevos nos ahorran tiempo, pero tienen un período intermedio o de transición que a veces puede llevar bastante tiempo antes de que se alcance la compatibilidad entre navegadores. Actualmente estamos en la etapa intermedia, donde algunos navegadores se han puesto al día, algunos se están poniendo al día y otros se quedan atrás. Es durante esta etapa que necesitamos tener un plan de respaldo o retroceso para los navegadores que aún no cuentan con soporte. Afortunadamente, Cedric Savarese ha creado un script que lee nuestros nuevos valores de propiedad CSS3 y muestra las columnas usando javascript. Puedes leer cómo implementar esto y descargar el script en Una lista aparte.


Generador de diseño de varias columnas

CSS3 Multi Column Layout GeneratorCSS3 Multi Column Layout GeneratorCSS3 Multi Column Layout Generator

Si en esta etapa te mueres por saltar y jugar con algunas de las propiedades que hemos discutido hoy, entonces he creado un rápido 'generador de múltiples columnas' con el que puedes tener problemas. No es nada lujoso, pero después de jugar un poco con él, deberías poder comprender los conceptos básicos del 'módulo de diseño de múltiples columnas' y poder comenzar a usarlo en tus propios proyectos.

También puedes descargar el código generado para poder experimentar más con algunas de las otras propiedades que no están incluidas en el generador.

Generador de diseño de múltiples columnas CSS3


Resumen

Eso nos lleva a un cierre del módulo de diseño de múltiples columnas CSS3. Espero que ahora comprendas mejor cómo usarlo. Realmente es bastante simple de usar una vez que hayas jugado un poco con él. A pesar de ser nuevo y tener algunas limitaciones de compatibilidad con el navegador, está comenzando a abrirse camino en Internet y estoy seguro de que solo será cuestión de tiempo antes de que sea un módulo CSS completamente aprobado e implementado.

Nos da la posibilidad de explorar algunos diseños geniales con CSS. Experimenta con él, juega con él y descarga los archivos fuente para los ejemplos en la parte superior de este tutorial. Me encantaría escuchar lo que tienes que decir y pensar sobre este nuevo módulo, házmelo saber en los comentarios a continuación.


Más enlaces, lecturas y recursos

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.