OmbuShop Crea Tu Tienda Online

Tu propia grilla con CSS o SASS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Sí, sabemos que hay montones de grillas de CSS y SASS dando vueltas. Pero tal vez quieras hacer tu propia grilla para mantener el control de tu código o simplemente por tus ganas de experimentar.
¡Veremos cómo se hace!

Si las grillas pre-hechas como SusySingularity no son suficientes —o son demasiado—, entonces te ha llegado el momento de comprender cómo puede construirse una grilla a medida y hacerlo por tu cuenta!

A continuación mostramos un ejemplo muy versátil y con pocas líneas de código.

Los elementos fundamentales

Para hacer una grilla simple, sólo necesitamos dos elementos:

  • fila: hará las veces de contenedor para las columnas, le aplicaremos la clase row.
  • columna: lo más importante de una grilla, le aplicaremos la clase column.

La única responsabilidad del elemento row (fila, en inglés) será la de evitar que se mezclen las columnas. Definimos una fila y mantenemos bajo nuestro control qué columnas se ubican en cada nivel. Además, utilizaremos la técnica del before y el after para que el contenedor no colapse.

Por otra parte, indicaremos a las columnas la propiedad float para que estén una al lado de la otra, y padding de ambos lados para preservar las calles.

Tanto las columnas como las filas tendrán box-sizing: border-box; para que el padding esté incluido en el ancho de la columna.

Modificadores para las columnas

Prepararemos columnas con los siguientes anchos: medio (half), tercio (third) y cuarto (quarter). Esto es muy sencillo utilizando porcentajes. También tendremos una clase para una columna que ocupe el ancho completo, lo haremos explícitamente para ser más descriptivos.

Por último, agregaremos dos clases más, que servirán como modificadores para forzar a una columna a ser la última, o la primera de la fila. Para esto utilizaremos la propiedad de CSS llamada clear.

Pantallas pequeñas

Para que las columnas no queden muy angostas en pantallas pequeñas, incluiremos un media query que nos permita la transformación a una única columna.

El código completo, con CSS

Los invitamos a estudiar el código completo con atención, a continuación.


.row, .column {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.row {
margin-left: auto;
margin-right: auto;
max-width: 1200px; /* opcional */
}
.row:before {
content: ” “;
display: table;
}
.row:after {
content: ” “;
display: table;
clear: both;
}

.column {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
}
.column.half {
width: 50%;
}
.column.third {
width: 33.3333333333%;
}
.column.quarter {
width: 25%;
}
.column.full {
width: 100%;
float: none;
clear: both;
}
.column.force-first {
clear: left;
}
.column.force-last {
clear: right;
}

@media screen and (max-width: 768px) {
.column, .column.half, .column.third, .column.quarter {
width: 100%;
float: none;
clear: both;
}
}

/***************************************/
/* Cosmética, no es parte de la grilla */

body {
color: #444;
font-family: sans-serif;
line-height: 1.2;
padding: 2em;
}
.row {
margin-bottom: 2em;
}
h1 {
font-weight: bold;
padding-bottom: .5em;
background: #ffffdf;
}
p {
background: #ffffdf;
}

See the Pen CSS Simple Grid (spanish) by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Al final del código hay algunos detalles cosméticos agregados, están para facilitar la visualización del resultado final y no son parte necesaria para armar la grilla.

Ver resultado en pantalla completa para ver el correcto funcionamiento responsive de la grilla!

El código completo, con SASS

Para quienes prefieran utilizar SASS (como yo), adjunto aquí una opción posible. Se podría compactar aún más el código utilizando mixins, placeholders y cálculos matemáticos, pero lo mantenemos como sigue para mantener la simpleza.


$gutter: 20px;
$max-width: 1200px;
$breakpoint_1: 768px;

.row, .column {
@include box-sizing(border-box);
}

.row {
margin-left: auto;
margin-right: auto;
max-width: $max-width; /* opcional */
&:before {
content: ” “;
display: table;
}
&:after {
content: ” “;
display: table;
clear: both;
}
}

.column {
position: relative;
min-height: 1px;
padding-left: $gutter/2;
padding-right: $gutter/2;
float: left;
&.half {
width: 50%;
}
&.third {
width: 33.3333333333%;
}
&.quarter {
width: 25%;
}
&.full {
width: 100%;
float: none;
clear: both;
}
&.force-first {
clear: left;
}
&.force-last {
clear: right;
}
}

.column, .column.half, .column.third, .column.quarter {
@media screen and (max-width: $breakpoint_1) {
width: 100%;
float: none;
clear: both;
}
}

/***************************************/
/* Cosmética, no es parte de la grilla */

body {
color: #444;
font-family: sans-serif;
line-height: 1.2;
padding: 2em;
}
.row {
margin-bottom: 2em;
}
h1 {
font-weight: bold;
padding-bottom: .5em;
background: #ffffdf;
}
p {
background: #ffffdf;
}

See the Pen SASS Simple Grid (spanish) by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Ver resultado en pantalla completa para ver el correcto funcionamiento responsive de la grilla!

¡Esperamos que puedan probar esta grilla pronto!

Click the following link for an english, geeky and more complex version of this code.
Tags: ,