Prueba Grillade directamente en línea con CodePen !

¡En acción!

Ahora en adelante la documentación ilustrada de Grillade, adornada con ejemplos concretos.

  1. Preámbulo
  2. Una grilla simple, monolínea
  3. La misma grilla con gutter
  4. Dimensionar los elementos hijos
  5. Una grilla multilínea
  6. Los offsets (pull y push)
  7. Reordonar los elementos
  8. Invertir la grilla
  9. Tamaño de pantalla intermedio
  10. Tu propia grilla con los mixins de Sass

Preámbulo

Pero antes, algunas informaciones complementarias antes de empezar.

Una grilla simple, monolínea

Agrega simplemente la clase .grid a un contenedor para obtener una grilla monolínea.
Los elementos hijos de este contenedor se adaptarán automáticamente a su contenedor padre. No importa el tipo, ni tampoco la cantidad.

<div class="grid"> <!-- parent (div u otro) -->
    <div>...</div>
    <div>...</div>
    <aside>...</aside>
</div>

El resultado:

yo soy un <div>, sin clase
eh yo también

La misma grilla con gutter

Al agregar la clase .has-gutter al contenedor padre, crearás un espacio entre cada elemento hijo.
Este espacio es configurable en la versión .scss de Grillade. El valor predeterminado de esta separación es de 1rem, pero también lo puedes modificar aplicandole la unidad querida (pixel, em, rem, %).

<div class="grid has-gutter">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass

El valor de este gutter es configurable gracias a unas clases adicionales: .has-gutter-l (gutter x2) o .has-gutter-xl (gutter x4).

<div class="grid has-gutter-xl">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass

Dimensionar los elementos hijos

Opcionalmente, puedes dimensionar cada elemento hijo dentro del espacio de un contenedor padre gracias a las clases .one-half, .one-third, .one-quarter, .one-fifth, .two-thirds, .three-quarters, y .full.

<div class="grid">
    <div class="one-fifth">...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

.one-fifth
Lorem Elsass

Esto también funciona agregando un gutter con la clase .has-gutter.

<div class="grid has-gutter">
    <div class="one-fifth">...</div>
    <div>...</div>
    <div class="one-fifth">...</div>
</div>

El resultado:

.one-fifth
Lorem Elsass
.one-fifth

Una grilla multilínea

Para convertir una grilla monolínea en una multilínea, simplemente agrega un sufijo -N (por ejemplo -3) a la clase .grid. Los valores del sufijo van de 2 a 12.

<div class="grid-3">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass
knack
Lorem Elsass

Esto también funciona con un gutter .has-gutter...

<div class="grid-3 has-gutter">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass
knack
Lorem Elsass

…y con los elementos hijos explícitamente dimensionados.

<div class="grid-3">
    <div class="one-half">...</div>
    <div class="one-half">...</div>
    <div class="one-third">...</div>
    <div class="two-thirds">...</div>	
    <div class="one-quarter">...</div>
</div>

El resultado:

Lorem Elsass
Lorem Elsass ipsum Choucroute knack
Choucroute knack
.one-half
.one-half
.two-thirds
.full
.one-quarter
.one-quarter
.one-half

Les offsets (pull y push)

Agrega la clase .pull o .push para posicionar un elemento hijo a la derecha o a la izquierda dentro de su contenedor padre.

<div class="grid-3">
    <div>...</div>
    <div>...</div>
    <div class="push">...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass
.push
Lorem Elsass

Reordenar los elementos

Las clases .item-first y .item-last permiten reordenar visualmente los elementos.

<div class="grid-3">
    <div>...</div>
    <div>...</div>
    <div class="item-first">...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
.item-first

Invertir la grilla

Es posible invertir totalmente el sentido de lectura de la grilla gracias al sufijo --reverse.

<div class="grid-3--reverse">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

primeroz
segundoz
tercioz

Tamaño de pantalla intermedio

Puedes indicar la cantidad de columnas deseadas cuando el tamaño de pantalla es intermedio (entre tiny y small, es decir entre 545px y 768px) utilizando el sufijo -small-N (con N entre 1 y 4).
Por ejemplo, un contenedor .grid-3-small-2 tendrá 1 columna en su versión mobile (caso predeterminado), 2 columnas en pantalla intermedia y finalmente 3 en pantalla grande.

<div class="grid-3-small-2">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass
Lorem
Lorem Elsass

También funciona con gutter (clase .has-gutter) y dimensiones explicitas aplicadas a los elementos hijos.

<div class="grid-3-small-2 has-gutter">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass
.one-quarter
.three-quarters

Tu propia grilla con los mixins de Sass

El preprocesador Sass (versión .scss) permite extender las posibilidades de Grillade y crear tus propias grillas. Para empezar, puedes modificar las variables de tamaño de gutter ($grid-gutters).

Puedes igualmente crear tus propias columnas. El mixin Sass siguiente, aplicado a la clase .grid-perso, construirá una grilla de 4 columnas sin gutter: .grid-perso { @include grid(4, 0); }

<div class="grid-perso">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass
Lorem
Lorem Elsass

Con un tamaño de gutter personalizado, esto podría dar: .grid-perso { @include grid(4, 1rem); }

<div class="grid-perso">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

El resultado:

Lorem Elsass ipsum Choucroute knack
Lorem Elsass ipsum Choucroute knack
Lorem Elsass
Lorem
Lorem Elsass

¡Ahora, juega!