CSS 3: Columnas

La futura recomendación CSS 3: Columnas, actualmente (octubre de 2014) 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.

Incorrecto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-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.

Incorrecto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p {
  column-width: 10em;
  -moz-column-width: 10em;
  -webkit-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:

Nota: Google Chrome no interpreta la propiedad -webkit-columns con dos valores como Firefox o Internet Explorer.

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.

Incorrecto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p {
  column-gap: 3em;
  columns: 3;
  -moz-column-gap: 3em;
  -moz-columns: 3;
  -webkit-column-gap: 3em;
  -webkit-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.

Incorrecto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p {
  column-rule: black solid 2px;
  columns: 3;
  -moz-column-rule: black solid 2px;
  -moz-columns: 3;
  -webkit-column-rule: black solid 2px;
  -webkit-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:

Incorrecto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
p {
  column-rule-color: black;
  column-rule-width: 2px;
  column-rule-style: solid;
  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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p {
  column-rule-color: black;
  column-rule-width: 2px;
  column-rule-style: solid;
  columns: 3;
  -moz-column-rule-color: black;
  -moz-column-rule-width: 2px;
  -moz-column-rule-style: solid;
  -moz-columns: 3;
  -webkit-column-rule-color: black;
  -webkit-column-rule-width: 2px;
  -webkit-column-rule-style: solid;
  -webkit-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.

Incorrecto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
div {
  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).

Ventajas de las columnas

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.

Incorrecto en Firefox Correcto en Internet Explorer Incorrecto en Chrome
div {
  columns: 3;

  text-align: justify;
}

h4 {
  column-span: all;
}

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).

Ventajas de las columnas

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.

Incorrecto en Firefox Correcto en Internet Explorer Correcto en Chrome
div {
  columns: 3;
  -webkit-columns: 3;

  text-align: justify;
}

h4 {
  column-span: all;
}

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).

Ventajas de las columnas

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.

Incorrecto en Firefox Correcto en Internet Explorer Correcto en Chrome
div {
  columns: 3;
  -webkit-columns: 3;

  text-align: justify;
}

h4 {
  column-span: all;
  -webkit-column-span: all;
}

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).

Ventajas de las columnas

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.

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

Por escribir