The grid
Por: Orlando Oviedo
Aunque tiene un parecido con la idea de Kevin Flyn en la película Tron, no es tan complejo como podría parecer.
Un grid (o malla en Español) es un pequeño sistema que permite organizar de mejor manera el contenido en una publicación. No es un concepto nuevo (https://en.m.wikipedia.org/wiki/Grid_(graphic_design)) pero con la llegada de las diferentes resoluciones de pantalla en diferentes tipos de dispositivos, se empezó a utilizar en el diseño y desarrollo web dada su gran flexibilidad y adaptación.
Básicamente un grid en css funciona acomodando el contenido en cajas ordenadas en base a columnas. Estas se apilan unas sobre y al lado de las otras.
Es buena práctica utilizar «Liquid Layouts» cuando se desarrolla para diferentes resoluciones porque el contenido simplemente se adapta a la pantalla por lo que es buena idea hacer el grid utilizando porcentajes en vez de medidas absolutas. Así se evitan desbordes y scroll en el contenido al ver el diseño en diferentes resoluciones.
¿Pero cómo funciona?
Hay al menos 4 técnicas para hacer un grid system. Mostraré una que queda entre lo nuevo y lo viejo (IE 8 y 11). Es lo suficientemente flexible para usarlo con cualquier dispositivo y en los navegadores más utilizados.
Como se explica más arriba, las cajas se acomodan sobre y al lado de otras. Para lograrlo se utiliza la propiedad float, que permite a las cajas acomodarse unas al lado de otras y al acabarse el espacio, seguir debajo de las anteriores.
Utilizará la propiedad box-sizing para crear el espaciado entre cajas (gutter) y anchos porcentuales para que todo siempre esté en su lugar.
Definiendo columnas
La cantidad de columnas es variable y depende mucho del diseñador gráfico, pero es importante que sea consistente en las diferentes resoluciones. La cantidad de columnas más común es 12 y es la que voy a utilizar acá para demostrar el funcionamiento.
Para saber cuanto mide una columna porcentualmente simplemente hay que dividir 100 entre la cantidad de columnas.
100 / 12
Una columna entonces mide 8.333333.
Internet Explorer sólo acepta dos decimales para los porcentajes, por lo que queda en 8.33%.
Entonces, una caja del tamaño de una columna mide 8.33%. Una caja de dos columnas mide 8.33 x 2 = 16.66%, y así sucesivamente hasta llegar a 12 columnas que sería el 100%. Se usará una serie de clases llamadas spanNcolumnas que definiran el ancho de la caja.
Los gutters serán de 20 pixeles exactos. Para esto se definirá un padding de 10px a cada lado de las columnas. Así, al sumar los 10 pixeles de las columnas, queda un gutter de 20 pixeles.
En la práctica
Lo que haré es crear una serie de clases de CSS que ayudarán a definir el grid.
.wrapper
La clase wrapper ayuda a acomodar el contenido en el centro del documento y define el ancho máximo que puede tener este.
.wrapper {
margin: 0 auto;
max-width: 1024px;
box-sizing:border-box;
}
.grid
La clase grid es el contenedor del grid (valga la redundancia) y se encarga de que no hayan desbordes.
.grid {
width: 100%;
box-sizing:border-box;
}
Para evitar el desborde de las columnas se usan las pseudoclases: before y :after para crear un «clearfix».
.grid:before,
.grid:after{
content: ‘ ‘;
display:table;
clear: both;
}
.row
La clase row sirve para definir filas y arreglar los excesos de borde que crean las columnas a la izquierda y derecha del grid por los 10 píxeles que hay a cada lado para definir el gutter.
Para quitar el exceso se usa un margen negativo a cada lado del row de la misma medida que el padding en las columnas para el gutter y se define el width en porcentaje que debe de ser el 100% más los 20 pixeles sobrantes en porcentaje. Así, si el ancho máximo del contenido es 1024 píxeles 20 x 100 / 1024, lo que da un resultado de 1.95%. Entonces 100 % + 1.95%.
Surge la pregunta ¿Por qué no usar las pseudo clases :first-child y :last-child para evitar esto?
La razón es por flexibilidad. Usando pseudo clases no se podría usar 8 cajas de 3 columnas en el mismo .row u otras combinaciones de columnas.
.grid .row {
box-sizing:border-box;
width: 101.95%;
margin: 0 -10px;
}
.column
Esta clase sirve para definir las propiedades como el padding para el gutter, el float para que sea adaptable y alto mínimo en caso de que no exista contenido dentro y no se estropee el el resto columnas.
.grid .row .column {
float: left;
padding: 0 10px;
box-sizing: border-box;
min-height: 1px;
}
.spanNcolumnas
Estas clases simplemente definen el ancho que la cajas pueden tener en base al número de columnas que pueden usar en el grid.
.grid .row .span1 {
width: 8.33%;
}
.grid .row .span2 {
width: 16.66%;
}
.grid .row .span3 {
width: 24.99%;
}
.grid .row .span4 {
width: 33.32%;
}…
Y así sucesivamente hasta llegar a las 12 columnas como se explicó anteriormente.
Se puede ver un ejemplo acá http://codepen.io/anon/pen/eNKKva
Hacer un grid responsive es bastante sencillo, pero eso será para otra ocasión.
