Diseños multicolumna

column-count:

Especifica el número de columnas deseadas y el número máximo de ellas permitidas. El valor por defecto es auto, que significa que tiene una columna

column-width:

Especifica la anchura de cada columna, así que con esta opción no especificaremos el número de columnas, el propio navegador te pondrá las columnas que salen con el tamaño de estas y con el espacio del elemento.

columns:

Es la forma abreviada para especificar primero el column-count (número de columnas) y el column-width (el ancho de las columnas).

column-gap:

Especifica la anchura entre las columnas que hemos creado.

column-fill:

Si se declara alguna altura ("height") de un elemento donde estamos usando las características "column" y queremos que el contenido se extienda por las columnas, usaremos "column-fill:balance".

column-span:

Permite que un elemento ocupe varias columnas. Si "column-span:all"; está establecido en un elemento, todo el contenido que viene antes de ese elemento en el código debería estar en columnas por encima de él.

Sólo se soporta en WebKit.

column-rule:

Entre cada columna conseguiremos que aparezca una linea vertical separadora de la columnas.

Es la forma abreviada de expresar estos tres valores:

• column-rule-color:inidical el color de la linea vertical.
• column-rule-style:aquí podremos poner cualquier tipo del "border-style".
• column-rule-width:indica el ancho de la linea, sus valores pueden ser thin | medium | thick o indicar la longitud.

Para más slides sobre CSS:

https://bermartinv.github.io/css/files/taller/menu_taller.html