Múltiples columnas con CSS3

Publicado por Leandro Gómez

Crear columnas utilizando CSS3 es cosa de niños. No podría ser más fácil, más rápido y más sencillo.

Advertencia: En la actualidad, esto solo funciona con navegadores que trabajan con los motores Webkit y Mozilla. Eso implica que en Internet Explorer solo se visualizará un solo párrafo largo a una columna en vez de múltiples columnas.

El código a emplear es bastante sencillo y directo. Haremos uso de column-count y column-gap para crear nuestras columnas.

column-count, a como lo indica su nombre, se utiliza para definir la cantidad de columnas que vamos mostrar y con column-gap le damos el espacio que queremos tener entre columnas.

El CSS:

#container p {      
    column-count: 3;      
    column-gap: 10px;       
}

Y eso es todo! Acuérdate de poner los prefijos -moz- y -webkit- para que funcione en Firefox, Chrome y Safari. Como siempre, puedes ver y jugar con un ejemplo en vivo por acá.

Imagen destacada cortesía de Paolo, CC-BY-SA 2.0.