Propiedad CSS columns
La propiedad CSS columns define el ancho y el número de columnas. Consulta los valores y prueba ejemplos.
La propiedad CSS columns es una abreviatura que distribuye el contenido de un elemento en múltiples columnas, como un periódico. Establece dos propiedades individuales a la vez:
column-count— el número máximo de columnas.column-width— el ancho mínimo que debe tener cada columna (es un ancho sugerido, no fijo).
En lugar de escribir ambas líneas:
.example {
column-width: 100px;
column-count: 3;
}se escribe una sola:
.example {
columns: 100px 3;
}Los dos valores pueden aparecer en cualquier orden, ya que uno es una longitud y el otro un entero, por lo que el navegador puede distinguirlos. También es posible indicar solo uno de ellos y dejar que el otro tome el valor predeterminado auto.
¿Por qué usar columns?
El diseño multicolumna es ideal para bloques largos de texto — artículos, definiciones, nubes de etiquetas — donde se busca que el lector recorra líneas más cortas. A diferencia de Flexbox o CSS Grid, no se divide el marcado en cajas separadas; el navegador distribuye un solo bloque de contenido entre las columnas y lo redistribuye cuando el contenedor cambia de tamaño.
Cómo interactúan los dos valores
Los valores describen un objetivo, y el navegador elige la mejor opción:
column-widthse trata como un mínimo. El navegador coloca tantas columnas de al menos ese ancho como el contenedor permita.column-countlimita ese número. El navegador nunca crea más columnas que este valor, aunque quepan más.
Así, columns: 100px 3 significa: "hacer columnas de al menos 100px de ancho, pero nunca más de 3." En un contenedor amplio se obtienen 3 columnas; a medida que el contenedor se estrecha, la cantidad baja a 2 y luego a 1, manteniendo cada columna con ≥ 100px. Esto es lo que hace que el diseño sea responsivo sin necesidad de media queries.
Si el ancho y el número de columnas solicitados no pueden coexistir en el elemento, el navegador prioriza el ancho y reduce el número de columnas para respetarlo.
La propiedad columns forma parte de las propiedades CSS3. Para espaciar y separar las columnas que genera, combínala con column-gap y column-rule; para que un encabezado se extienda por todas las columnas, usa column-span.
| Valor inicial | auto auto |
|---|---|
| Se aplica a | Contenedores de bloque excepto cajas envolventes de tabla. |
| Heredada | 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 cada columna tiene al menos 50px de ancho y el número de columnas está limitado a 5. Como las columnas son estrechas, el navegador puede incluir hasta las 5 en un contenedor amplio — y menos a medida que se estrecha:
Ejemplo con un ancho menor y un límite de columnas mayor
Ejemplo de la propiedad CSS columns con column-width y column-count como valores
<!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 de las columnas. |
<integer> | Establece el número máximo de columnas. |
initial | Establece la propiedad en su valor predeterminado. |
inherit | Hereda la propiedad del elemento padre. |
Errores comunes
- Es una sugerencia, no una orden.
column-widthes un mínimo, por lo que el ancho renderizado casi siempre es mayor que el valor indicado. Para fijar un ancho exacto también hay que controlar el tamaño del contenedor. - Las columnas se equilibran, no se llenan de arriba abajo. Por defecto, el navegador intenta que todas las columnas tengan aproximadamente la misma altura en lugar de llenar la primera antes de comenzar la siguiente.
- Cuidado con los saltos. Las palabras largas o los elementos que no pueden romperse pueden desbordarse en columnas estrechas;
break-inside: avoidayuda a mantener elementos como tarjetas intactos. - Solo
column-widthes animable. El número de columnas salta entre enteros, por lo que las transiciones sobre ese valor no son suaves.