Aunque existen muy buenos frameworks CSS con su propio sistema de rejilla, como bootstrap, foundation, purecss, 320andup, etc, decidí programar mi propio sistema como experimento para comprender el funcionamiento de los grid CSS y a la vez que me pudiera servir como base para cualquier proyecto sencillo.
Las características que buscaba eran:
-Que fuera responsive, y que pudiera colocar la disposición de las cajas dependiendo de la pantalla.
-Sistema de 12 columnas.
-Que fuera extremadamente sencillo de entender y de esta manera que cualquiera pudiera adaptarlo a sus necesidades.
Así es como lo solucioné:
Utilizando medidas relativas para que las dimensiones de las cajas se adaptaran a todas las pantallas. El problema aquí es que si por ejemplo definimos un 100% para el ancho de la caja de 12 columnas y sumamos el posible padding y border la caja se desbordará. Para solucionar este problema utilicé box-sizing:border-box y el selector universal asterisco.
La propiedad box-sizing de CSS3 obliga a los navegadores a recalcular el ancho de la caja de tal manera que el padding y el border estén incluidos en este ancho, es decir que el ancho que especifiquemos en la propiedad width sea el que se muestre, incluyendo el padding y el border.
Resumiendo:
-Tamaño total por defecto: width + padding + border
-Con box-sizing:border-box, el tamaño total: width (el padding y el border se ajustaran dentro del ancho dado en width)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Las medidas relativas de las cajas las combino con las media queries:
@media (max-width: 768px) {
.small-1 {width: 8.333%;}
.small-2 {width: 16.666%;}
...
}
@media (min-width: 768px) {
.large-1 {width: 8.333%;}
.large-2 {width: 16.666%;}
...
}El calculo de los tantos por ciento es realmente sencillo:
Si la celda de 12 columnas (.small-12 y .large-12) es del 100%, la de 2 columnas (.small-2 y .large-2) será del 16.666% (2×100/12 = 16.666)
Por otro lado, defino un ancho máximo de la fila y la centro en pantalla de la siguiente manera:
.row {
max-width:960px;
margin: 0 auto;
}También flotamos a la izquierda las cajas y les damos un padding:
[class*='large'], [class*='small'] {
float: left;
padding: 5px;
}Puedes ver un ejemplo y probar a redimensionar tu navegador para que veas como las cajas se “recolocan» en este ejemplo.
El código HTML correspondiente es el siguiente:
<div class="row"> <div class="large-1 small-6"></div> <div class="large-11 small-6"></div> </div> <div class="row"> <div class="large-3 small-1"></div> <div class="large-3 small-3"></div> <div class="large-3 small-2"></div> <div class="large-3 small-6"></div> </div>
Espero que este pequeño ejemplo te pueda resultar útil y lo puedas utilizar como punto de partida en algún proyecto sencillo.
Github: https://github.com/vicentegarcia/responsive-css-grid