Propiedad CSS columns
La propiedad CSS columns es una abreviatura de las siguientes propiedades:
column-count, que define el número máximo de columnas.column-width, que define el ancho mínimo de las columnas.
Estas dos propiedades juntas crean un diseño de varias columnas que se adapta al ancho del contenedor, reduciendo típicamente el número de columnas a medida que disminuye el espacio.
La propiedad columns es una de las propiedades de CSS3.
Establecer tanto column-count como column-width no siempre tiene sentido, ya que puede restringir la flexibilidad y la capacidad de respuesta del diseño.
INFO
Si el ancho y el número de columnas no caben en el ancho del elemento, el navegador reducirá automáticamente el número de columnas para ajustarse a los anchos de columna especificados.
| Valor inicial | auto auto |
|---|---|
| Se aplica a | Contenedores de bloque excepto cajas envolventes de tabla. |
| Heredado | No. |
| Animable | Sí. Solo column-width es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.columns = "100px 2"; |
Sintaxis
Sintaxis de la propiedad CSS columns
columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;Ejemplo de la propiedad columns:
Ejemplo de la propiedad CSS columns con las propiedades column-width y column-count
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 100px 3;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Resultado
En el siguiente ejemplo, el ancho mínimo para cada columna se establece en 50px, y el número máximo de columnas en 5:
Ejemplo de la propiedad columns con ancho y número de columnas especificados:
Ejemplo de la propiedad CSS columns con las propiedades column-width y column-count como valor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 50px 5;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
auto | Tanto column-width como column-count se establecen en auto. Este es el valor predeterminado. |
<length> | Establece el ancho mínimo para las columnas. |
<integer> | Establece el número máximo de columnas. |
initial | Establece la propiedad en su valor predeterminado. |
inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son las propiedades utilizadas para crear diseños de varias columnas en CSS?