Cómo crear columnas con CSS usando inline-block

Uno de los retos a los que muchos se enfrentan en su vida cuando usan CSS es la de tener que hacer columnas. Antiguamente se usaban las tablas para crear varias columnas, pero desde que eso ya no se ve bien ni es útil ese modo se cambió por CSS y capas.

Fue cuando se uso la propiedad float, que nos permitía tener capas en línea, pero en si la línea del texto, o la sucesión del documento no se acoplaba pues quedaban flotando, literalmente. Por eso ahora lo recomendable es usar inline-block, que nos da algunas ventajas y desventajas, y en el tutorial de hoy vamos a aprender a usarla.

inline-block es una propiedad del estilo display que nos permite configurar cómo se va a mostrar nuestro contenedor, puede ser en bloques, en línea, o en este caso en inline-block. Hay muchas más propiedades para configurar, pero hoy nos centraremos sólo en inline-block, por la potencia a la que trabaja.

Ejemplo del tutorial

HTML

Entonces, para este tutorial tenemos sólo un contenedor y unas article que vamos a usar para poder colocar contenido en nuestros bloques.

CSS

Con CSS configuramos la propiedad inline-block en nuestro article. Coloco el código del container y demás por si alguien quiere echarle un vistazo, sin embargo para fines prácticos no es el punto importante. Por último, al final de nuestra clase de article he añadido un código para la compatibilidad con IE 7 que aunque no nos guste tenemos que darle cierto soporte.

Observaciones

Si han hecho este mini tutorial habrán visto que ya sirven nuestras columnas, pero hay algunas cuestiones que se tienes que notar. La más importante es que debemos tener mucho cuidado con la configuración de nuestras columnas, ya que cambiar algo que no haga que se vea columna hará que todo deje de verse en linea, con esto quiero decir por ejemplo el alto de las columnas,, ya que al menos no es posible nativamente hacer que la columna más pequeña se adapte ya que se aplica el efecto inline, por lo que si hay un espacio en blanco éste se verá justo arriba de la nueva columna.

Este es el principal problema, pero considero que las columnas se deben usar en este caso para hacer columnas sencillas, con un ancho y altura fija, para tener un mejor control de espacio y uniformidad, porque de lo contrario habrá muchos huecos blancos en nuesto diseño.