CSS: Columnas

En esta lección se comentan las propiedades CSS definidas en la futura recomendación CSS Multi-column Layout Module Level 1. Aunque actualmente (octubre de 2021) esta recomendación no está formalmente aprobada, se considera parte de la definición oficial de CSS en CSS Snaphot 2020.

Estas propiedades permiten definir columnas de texto en cualquier elemento de bloque.

Columnas: column-count, column-width, columns

La propiedad column-count

La propiedad column-count establece el número de columnas a mostrar. El navegador distribuye el espacio disponible para acomodar el número de columnas solicitadas.

p {
  column-count: 2;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La propiedad column-width

La propiedad column-width establece el ancho de las columnas. El navegador muestra el número de columnas que quepan en el espacio disponible.

p {
  column-width: 10em;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La propiedad compuesta columns

La propiedad compuesta columns establece el ancho de las columnas o el número de columnas.

Esta propiedad admite uno o dos valores:

Espacio entre columnas: column-gap

La propiedad column-gap establece el tamaño del espacio entre columnas. El navegador distribuye el espacio disponible para acomodar el número de columnas solicitadas.

p {
  column-gap: 3em;
  columns: 3;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Borde entre columnas: column-rule, column-rule-color, column-rule-width y column-rule-style

Las propiedades column-rule, column-rule-color, column-rule-width y column-rule-style establecen un borde de separación entre columnas.

La propiedad column-rule

La propiedad compuesta column-rule requiere tres valores, el color, el grosor y el estilo del borde, como en el caso de los bordes de los elementos.

p {
  column-rule: black solid 2px;
  columns: 3;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Las propiedades column-rule-color, column-rule-width y column-rule-style

Las propiedades individuales column-rule-color, column-rule-width y column-rule-style establecen conjuntamente un borde de separación entre columnas:

p {
  column-rule-color: red;
  column-rule-width: 2px;
  column-rule-style: dashed;
  columns: 3;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Extender sobre columnas: column-span

La propiedad column-span permite que un elemento se extienda a lo largo de varias columnas. Esta propiedad puede tomar los valores none y all.

div {
  columns: 3;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  columns: 3;
  text-align: justify;
}

h4 {
  column-span: all;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Otras propiedades: column-fill, break-before, break-after, break-inside

En construcciónPor escribir