¿Estás cansado del diseño web tradicional de una sola columna? ¡Entonces es hora de explorar el diseño con múltiples columnas usando CSS3! En este artículo, te mostraremos cómo puedes utilizar esta técnica para hacer que tu sitio web sea más atractivo visualmente y mejorar la experiencia del usuario. Sigue leyendo para descubrir los mejores consejos y trucos para el diseño de múltiples columnas con CSS3 en TIEngranaje.
Creando un diseño de varias columnastambién conocido como “diseño de periódico”, ha sido implementado por desarrolladores web desde hace bastante tiempo. Sin embargoesto a menudo ha resultado en el uso de técnicas de escamas y flotadores.
El uso de estas técnicas generalmente resulta en un proceso que consume mucho tiempo. Afortunadamente, CSS3 proporciona una diseño de varias columnas módulo que ofrece más flexibilidad y control sobre técnicas y métodos anteriores.
Compatibilidad con navegador
Antes de comenzar a implementar este módulo, debe tener en cuenta que hay soporte de navegador limitado en este momento. Internet Explorer 10+, así como Firefox, Chrome, Safari y Opera, admiten este módulo.
Sin embargo, aunque Internet Explorer 10 y Opera proporcionan soporte nativoFirefox, Chrome y Safari requieren su prefijos de proveedores en este momento. Versiones anteriores de Internet Explorer no provee cualquier soporte para este módulo.
| Navegador | Prefijo de proveedor |
|---|---|
| Internet Explorer 10+ | None |
| Firefox | -moz-column(s)-*-* |
| Ópera | None |
| Safari | -webkit-column(s)-*-* |
| Cromo | -webkit-column(s)-*-* |
Propiedades de varias columnas
Como mínimo, debe especificar el número de columnas o el ancho de sus columnas, dentro de un elemento de varias columnas. Sin embargo, hay propiedades adicionales que cubriremos que son parte de este módulo.
| Propiedad | Descripción |
|---|---|
columns |
Una propiedad abreviada para establecer column-width y column-count. |
column-count |
Especifica el número de columnas en las que se debe dividir un elemento. |
column-fill |
Especifica cómo llenar las columnas. |
column-gap |
Especifica el espacio entre las columnas. |
column-rule |
Una propiedad abreviada para establecer todos los column-rule-* propiedades. |
column-rule-color |
Especifica el color de la regla entre columnas. |
column-rule-style |
Especifica el estilo de la regla entre columnas. |
column-rule-width |
Especifica el ancho de la regla entre columnas. |
column-span |
Especifica cuántas columnas debe abarcar un elemento. |
column-width |
Especifica el ancho de las columnas. |
Creación de columnas
Puedes usar el taquigrafía propiedad column para especificar el número de columnas y/o el ancho de las columnas. Como alternativa, debe utilizar el column-count y column-width propiedades como se describe a continuación.
La propiedad de la columna acepta uno o dos valores. Si proporciona dos valores, uno de los valores debe establecerse en auto. Auto es el valor predeterminado para count y width.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#multi {
-moz-columns:300px auto;
-webkit-columns:300px auto;
columns:300px auto;
-moz-columns:auto 3;
-webkit-columns:auto 3;
columns:auto 3;
-moz-columns:300px;
-webkit-columns:300px;
columns:300px;
-moz-columns:3;
-webkit-columns:3;
columns:3;
}
</style>
</head>
<body>
<div id="mutli">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...
</div>
</body>
</html>Propiedad de ancho de columna
El column-width propiedad hace exactamente lo que dice. Le permite especificar un ancho fijo para las columnas. Los valores se pueden expresar usando medidas comunes de CSS como px, emetc.
Si esta propiedad se establece en autoentonces se dictará el ancho de las columnas por otras propiedadescomo column-count.
column-width: auto|[length];Propiedad de recuento de columnas
Si prefiere dividir el contenido según el número de columnas en lugar de por ancho, luego use el column-count propiedad. El contenido se dividirá en el número requerido de columnas.
Si esta propiedad se establece en autoentonces el número de columnas será decidido por otras propiedades, como column-width.
column-width: auto|[number];propiedad de la brecha de columna
El column-gap propiedad proporciona la capacidad de agrega un espacio entre cada una de las columnas. El ancho del espacio se realiza utilizando medidas CSS estándar. El ancho del espacio que especifique no puede ser un numero negativo.
column-gap: normal|[length];Propiedad de regla de columna
El column-rule la propiedad esencialmente coloca un borde por el medio del column-gap. Usar el column-rule propiedad, la column-gap También se utiliza la propiedad. El ancho debe especificarse y debe tener un valor igual o mayor que el column-rule.
El column-rule propiedad es una propiedad abreviada para column-rule-color, column-rule-styley column-rule-width.
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width: thin|medium|thick|[length];
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
column-rule-color: color;Propiedad column-span
El column-span La propiedad le permite abarcar todas las columnas.
Por ejemplo, si tiene un elemento como un encabezado (h1) que le gustaría abarcar todas las columnaspuedes usar el column-span:all propiedad/valor y aplicarlo a la h1 selector.
column-span: all|none;Propiedad de relleno de columna
El column-fill propiedad da acepta dos valores para establecer cómo se equilibra la cantidad de contenido en las columnas. Si la propiedad se establece en balanceentonces la variación en la longitud de la columna será minimizado y todas las longitudes serán lo más igual posible.
Si se establece en auto entonces las columnas serán llenado en orden. Por ejemplo, esto puede dar como resultado que la tercera de las 3 columnas tenga menos contenido que las 2 columnas anteriores. El balance el valor de la propiedad proporciona aproximadamente igual altura en cada columna.
column-fill: balance|auto;Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#multi {
line-height:1.5em;
-moz-columns:3;
-webkit-columns:3;
columns:3;
-moz-column-gap:80px;
-webkit-column-gap:80px;
column-gap:80px;
-moz-column-rule:4px solid #ababab;
-webkit-column-rule:4px solid #ababab;
column-rule:4px solid #AAAAAA;
}
</style>
</head>
<body>
<div id="mutli">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...
</div>
</body>
</html>