Propiedad CSS column-width

La propiedad CSS column-width establece el ancho ideal de cada columna en un diseño multicolumna. En lugar de indicarle al navegador cuántas columnas debe crear, le indicas qué tan anchas deben ser, y el navegador calcula cuántas columnas caben en el espacio disponible.

Este es el enfoque opuesto al de column-count, donde se fija el número de columnas y se deja que su ancho varíe. column-width es lo que hace que el texto multicolumna sea adaptable por defecto: a medida que el contenedor se amplía, aparecen más columnas; a medida que se estrecha, las columnas desaparecen hasta que queda una sola columna.

La propiedad column-width es una de las propiedades de CSS3.

Cómo funciona column-width

El valor se entiende mejor como un ancho mínimo deseado, no uno estricto. El navegador encaja tantas columnas de (al menos) ese ancho como caben, y luego las estira para llenar el espacio restante.

Si el contenedor puede albergar varias columnas del ancho indicado, se obtienen varias columnas.
Si el contenedor es más estrecho que el valor especificado, se obtiene una sola columna tan ancha como el contenedor — el ancho nunca desborda el cuadro.
Cuando column-count también está definido, column-width se convierte en un ancho máximo: el navegador utiliza la restricción que produzca menos columnas. El shorthand para definir ambos a la vez es columns.

Una forma aproximada de predecir el resultado: número de columnas ≈ floor(ancho del contenedor / (column-width + column-gap)). El valor predeterminado de column-gap es 1em.

Cuándo utilizarlo

Recurre a column-width cuando quieras longitudes de línea legibles que se adapten al viewport — por ejemplo, para distribuir un artículo largo o una lista de elementos cortos en columnas estilo periódico sin escribir media queries. Como el número de columnas se ajusta automáticamente, la misma regla funciona en un teléfono (una columna) y en un escritorio amplio (tres o cuatro columnas).

Información

Los navegadores modernos admiten column-width sin prefijos de proveedor. El valor predeterminado auto significa que el ancho de columna lo determinan otras propiedades como column-count, o vuelve a una sola columna si nada más lo limita.

Valor inicial	auto
Se aplica a	Contenedores de bloque excepto cajas envolventes de tabla.
Heredado	No.
Animable	Sí.
Versión	CSS3
Sintaxis DOM	object.style.columnWidth = "5px";

Sintaxis

Sintaxis de la propiedad CSS column-width

column-width: auto | length | initial | inherit;

Ejemplo de la propiedad column-width:

Ejemplo de la propiedad CSS column-width con la propiedad length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to 80px.</p>
    <div>
      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>

Pruébalo tú mismo »

Resultado

![Propiedad CSS column-width](https://api.w3docs.com/uploads/media/default/0001/03/5dc2724355e1e0cd7af891102d3b3d2c9e042376.png "CSS column-width Property" =420x)

Ejemplo de la propiedad column-width con el valor "auto":

Con auto, el navegador no impone un ancho objetivo. Combinado con column-count, deja que la regla de recuento decida el diseño; solo, vuelve a una sola columna.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to auto.</p>
    <div>
      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>

Pruébalo tú mismo »

Columnas adaptables sin media queries

Dado que el navegador deriva el número de columnas del ancho disponible, una sola regla column-width produce un diseño que se reorganiza por sí solo. Aquí también añadimos un column-gap y una column-rule para la separación. Redimensiona la vista previa para observar cómo aparecen y desaparecen las columnas.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive columns</title>
    <style>
      .news {
        column-width: 14em;
        column-gap: 2em;
        column-rule: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="news">
      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.
    </div>
  </body>
</html>

Errores comunes

Es un objetivo, no una garantía. El ancho real de columna renderizado rara vez coincide exactamente con el valor establecido — el navegador estira las columnas para llenar la fila. Úsalo para controlar aproximadamente cuántas columnas aparecen, no su ancho exacto en píxeles.
column-width y column-count interactúan. Cuando ambos están presentes, el navegador trata column-width como un máximo y nunca supera column-count. Establece solo uno a menos que desees intencionalmente un límite en ambos ejes.
El contenido alto puede distribuir las columnas de forma desigual. Usa column-fill para controlar cómo se equilibra el contenido entre las columnas.
Los porcentajes no están permitidos. A diferencia de muchas propiedades de ancho, column-width acepta solo una longitud (px, em, ch, …) o auto — no %.

Valores

Valor	Descripción	Pruébalo
auto	El ancho de la columna lo especifica el navegador. Este es el valor predeterminado.
length	El ancho de las columnas se especifica mediante una longitud.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

column-count — fija el número de columnas en lugar de su ancho.
columns — shorthand para column-width y column-count.
column-gap — espacio entre columnas.
column-rule — una línea dibujada entre columnas.
column-span — permite que un elemento se extienda por todas las columnas.

Práctica

¿Qué hace la propiedad 'column-width' en CSS?

La propiedad 'column-width' especifica el ancho de columna en un diseño multicolumna.La propiedad 'column-width' especifica el número de columnas en un diseño.La propiedad 'column-width' especifica el ancho de la ventana del navegador.La propiedad 'column-width' puede aceptar valores en 'px', 'em', 'rem' o un porcentaje.La propiedad 'column-width' especifica el ancho preferido para las columnas.