Múltiples columnas con CSS3
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.