Saltar a contenido

Columnas

Se han añadido nuevas propiedades que nos permiten crear columnas directamente a partir de un texto, estas son:

  • column-count: Define el número de columnas en el que se va a dividir el texto. El texto será dividido de la mejor forma posible para que ocupe todo el espacio.
  • column-width: Define el ancho de la columna (en unidades CSS).
  • column-gap: Define el espacio entre las columnas (en unidades CSS).
  • column-rule: Mediante esta propiedad podemos añadir una línea separadora entre las columnas, si no especificamos esta propiedad no se añadirá ninguna línea. Debemos de indicarle tres valores: ancho de la línea (en unidades CSS), estilo de la línea (solid, dotted, double, etc.) y color de la línea.

Para dar un mayor soporte antepondremos los prefijos -webkit- y -moz-, de la forma:

1
2
3
4
5
6
7
8
9
-webkit-column-count: 3;
-webkit-column-rule: 1px solid silver;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-rule: 1px solid silver;
-moz-column-gap: 10px;
column-count: 3;
column-rule: 1px solid silver;
column-gap: 10px;

Con lo que obtendríamos un resultado similar a: