CSS 3: Columnas

La futura recomendación CSS 3: Columnas, actualmente (marzo de 2017) 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;
}

Aunque la recomendación CSS 3: Columnas no ha sido aprobada, los navegadores admiten la mayoría de propiedades de esta recomendación (con el nombre oficial o prefijadas). Las columnas suponen un gran avance para el diseño de páginas web ya que facilitan la lectura de textos largos en una misma página, sobre todo en las pantallas actuales, de cada vez más resolución horizontal.

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;
}

Aunque la recomendación CSS 3: Columnas no ha sido aprobada, los navegadores admiten la mayoría de propiedades de esta recomendación (con el nombre oficial o prefijadas). Las columnas suponen un gran avance para el diseño de páginas web ya que facilitan la lectura de textos largos en una misma página, sobre todo en las pantallas actuales, de cada vez más resolución horizontal.

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;
}

Aunque la recomendación CSS 3: Columnas no ha sido aprobada, los navegadores admiten la mayoría de propiedades de esta recomendación (con el nombre oficial o prefijadas). Las columnas suponen un gran avance para el diseño de páginas web ya que facilitan la lectura de textos largos en una misma página, sobre todo en las pantallas actuales, de cada vez más resolución horizontal.

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;
}

Aunque la recomendación CSS 3: Columnas no ha sido aprobada, los navegadores admiten la mayoría de propiedades de esta recomendación (con el nombre oficial o prefijadas). Las columnas suponen un gran avance para el diseño de páginas web ya que facilitan la lectura de textos largos en una misma página, sobre todo en las pantallas actuales, de cada vez más resolución horizontal.

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;
}

Aunque la recomendación CSS 3: Columnas no ha sido aprobada, los navegadores admiten la mayoría de propiedades de esta recomendación (con el nombre oficial o prefijadas). Las columnas suponen un gran avance para el diseño de páginas web ya que facilitan la lectura de textos largos en una misma página, sobre todo en las pantallas actuales, de cada vez más resolución horizontal.

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