Como aplicar columnas en WordPress incorporadas en style.css

Añadir columnas en WordPress, o en realidad cualquier tipo de formato en desarrollo web, está resultando cada día más fácil. Hay un montón de recursos gratuitos que podemos encontrar en la red gracias al esfuerzo de muchos programadores que comparten sus desarrollos haciéndonos a todos la vida un poquito más fácil. Éste es el caso que me ocupa hoy, y del que quería hablaros, las clases de columnas listas para integrar en un fichero .css

A la hora de crear una plantilla de WordPress quizá donde más tiempo pasas es creando el archivo style.css, que es el que define el diseño de la plantilla a nivel visual, pues bien, aquí es donde integraremos este código que permitirá que luego podamos usar estas clases en cualquier parte de nuestro proyecto con WordPress, y realmente podremos dar a cada página o post un estilo propio, pero vamos a ver un ejemplo que tiendo a enrollarme como una persiana:

Por cierto, puedes encontrar más información acerca de las clases de columnas aquí: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css 

El uso de estas clases es tan simple como potente, veamos un layout de dos columnas en la que la primera ocupará un tercio del ancho y la segunda dos tercios: La primera columna que podéis ver aquí tiene un ancho de un tercio del espacio total que ocupa la parte en la que estamos escribiendo nuestra página o post Ahora pasemos a la segunda columna, la cual ocupa dos tercios del espacio total, esto es tan solo un pequeño ejemplo para que veais el funcionamiento de las clases de columnas con css, aunque podemos usar muchas estructuras de columnas diferentes.

Este es el código que he usado para crear este ejempo:

<div class="one-third first"> 
La primera columna que ves aquí tiene un ancho de un tercio del espacio total que ocupa la parte en la que estamos escribiendo nuestra página o post </div> 
<div class="two-thirds"> 
Ahora pasemos a la segunda columna, la cual ocupa dos tercios del espacio total, esto es tan solo un pequeño ejemplo para que veais el funcionamiento de las clases de columnas con css, aunque podemos usar muchas estructuras de columnas diferentes. 
</div>

Como puedes ver aplicar estos estilos es realmente simple, y podemos crear casi cualquier layout que se nos ocurra, one-half/one-half, one-third/one-third/one-third, y podríamos seguir así. Creo que captas la idea, ¿no?

Otra de las cosas que incorporan estas clases es la clase .first, esta clase debemos colocarla a la primera columna de cada fila, así nos aseguraremos que elimine el margen a la izquierda y que todo cuadre bien en nuestra estructura de columnas, de otra forma, se nos podría descuadrar todo.

Por cierto, no se si he comentado que también es completamente responsive, por lo que nuestra estructura de columnas se adaptará completamente a cualquier pantalla de cualquier dispositivo en el que se visualice la web que estamos desarrollando.

Aquí te dejo el código completo por si no lo estás usando que empieces a hacerlo ya, es realmente útil, espero que lo disfrutes:

/* Column Classes Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css --------------------------------------------- */ 

.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { 
  float: left; margin-left: 2.564102564102564%; 
} 
.one-half, .three-sixths, .two-fourths { 
  width: 48.717948717948715%; 
} 
.one-third, .two-sixths { 
  width: 31.623931623931625%; 
} 
.four-sixths, .two-thirds { 
  width: 65.81196581196582%; 
} 
.one-fourth { 
  width: 23.076923076923077%; 
} 
.three-fourths { 
  width: 74.35897435897436%; 
} 
.one-sixth { 
  width: 14.52991452991453%; 
} 
.five-sixths { 
  width: 82.90598290598291%; 
} 
.first { 
  clear: both; 
  margin-left: 0; 
}