CSS 3: Columnas

La futura recomendación CSS 3: Columnas, actualmente (octubre de 2018) en elaboración, permite definir columnas de texto en cualquier elemento de bloque. En CSS 2.1 no había ninguna propiedad similar.

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.

Chrome y Edge admite la propiedad column-span, Firefox no la admite (véase Bugs de Firefox)

div {
  columns: 3;
  text-align: justify;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Incorrecto en Firefox Correcto en Edge
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

Por escribir