CSS: Columnas

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

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

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:

• Si el valor es un número sin unidad, se interpreta como el número de columnas.

  p {
    columns: 4;
    text-align: justify;
  }
  

  
• Si el valor es una distancia (un número con unidad), se interpreta como la anchura de las columnas:

  p {
    columns: 8em;
    text-align: justify;
  }
  

  
• Si se escriben dos valores, si el elemento tiene un tamaño predefinido, se hace caso únicamente al número de columnas, pero si el elemento no tiene un tamaño predefinido (tablas, elementos flotantes, etc.), se hace caso de los dos valores:
  

  p {
    columns: 2 8em;
    float: left;
    text-align: justify;
  }
  

  

  Nota: Google Chrome no interpreta la propiedad columns con dos valores, pero Firefox sí lo hace, como se comenta en la página de diferencias entre navegadores.

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

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:

• La propiedad column-rule-color establece el color del borde.
• La propiedad column-rule-width establece el grosor del borde.
• La propiedad column-rule-style establece el estilo del borde (entre los estilos de borde definidos en la recomendación CSS 2.1).

p {
  column-rule-color: red;
  column-rule-width: 2px;
  column-rule-style: dashed;
  columns: 3;
  text-align: justify;
}