CSS
Columnas

Sintaxis

• recuento de columnas: auto | número | heredar | inicial | no establecido;
• ancho de columna: auto | longitud;
• columna: [ancho de columna] | [recuento de columnas];
• intervalo de columnas: ninguno | todos | heredar | inicial | no establecido;
• espacio entre columnas: normal | longitud | heredar | inicial | no establecido;
• relleno de columna: auto | balance | inherit | intial | unset;
• columna-regla-color: color | inherit | initial | unset;
• columna-regla-estilo: ninguno | oculto | punteado | punteado | sólido | doble | surco | cresta | inserción | comienzo | heredado | inicial | unset;
• columna-regla-ancho: delgado | medio | grueso | largo | heredado | inicial | no establecido;
• column-rule: [column-rule-width] | [columm-rule-style] | [column-rule-color];
• break-after: auto | siempre | izquierda | derecha | recto | verso | página | columna | región | evitar | evitar-página | evitar-columna | evitar-región;
• break-before: auto | siempre | izquierda | derecha | recto | verso | página | columna | región | evitar | evitar-página | evitar-columna | evitar-región;
• break-inside: auto | Avoid | Avoid-page | Avoid-column | Avoid-region;

Ejemplo simple (conteo de columnas)

El diseño de varias columnas de CSS facilita la creación de varias columnas de texto.

Código

<div id="multi-columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

.multi-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

Resultado

Ancho de columna

La propiedad de column-width establece el ancho de columna mínimo. Si no se define el column-count el navegador creará tantas columnas como se ajusten al ancho disponible.

Código:

<div id="multi-columns">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

.multi-columns {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

Resultado