1. Une grille simple, monoligne
  2. La même avec gouttière
  3. Dimensionner les enfants
  4. Une grille multi-lignes
  5. Les offsets (pull et push)
  6. Réordonner les éléments
  7. Inverser la grille
  8. Taille d'écran intermédiaire
  9. Votre grille avec des mixins Sass
 

Une grille simple, mono-ligne

Appliquez simplement la classe .grid sur un conteneur pour obtenir une grille mono-ligne.
Les enfants, quels qu'ils soient et quel que soit leur nombre, s'afficheront de manière équitable les uns à côté des autres.

<div class="grid"> <!-- parent (div ou autre) -->
    <div>...</div>
    <div>...</div>
    <aside>...</aside>
</div>

Le résultat :

je suis un <div>, sans class
hey moi aussi
moi je suis un <aside>

La même avec gouttière

L'ajout de la classe .has-gutter crée un espace entre les enfants
Cet espace est configurable dans la version .scss de Grillade. La valeur par défaut de la gouttière est 1rem mais il est parfaitement possible de la modifier en optant pour la valeur et l'unité qui vous siéra (pixel, em, rem, %).

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass

La taille de la gouttière est configurable à l'aide de classes additionnelles : .has-gutter-l (gouttière x2) ou .has-gutter-xl (gouttière x4).

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass

Dimensionner les enfants

Il est possible, en option, de dimensionner chaque enfant par rapport à l'espace contenu au sein du parent, grâce aux classes .one-half, .one-third, .one-quarter, .one-fifth, .two-thirds, .three-quarters, .one-sixth, .five-sixths ou .full

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

Le résultat :

.one-fifth
Lorem Elsass

Cela fonctionne également avec l'indication de gouttière .has-gutter

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

Le résultat :

.one-fifth
Lorem Elsass
.one-fifth

Une grille multi-lignes

À partir de l'objet .grid, il suffit d'ajouter un suffixe -N (par exemple -3) pour passer en mode multi-lignes. Les valeurs du suffixe, et donc le nombre de colonnes peuvent aller de 2 à 12.

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass
knack
Lorem Elsass

Cela fonctionne également avec l'indication de gouttière .has-gutter

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass
knack
Lorem Elsass

Cela fonctionne également avec des enfants dimensionnés explicitement.

<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>

Le résultat :

Lorem Elsass
Lorem ipsum dolor sit amet
Choucroute knack
.one-half
.one-half
.two-thirds
.full
.one-quarter
.one-quarter
.one-half
.one-sixth
.one-sixth
.two-thirds

Les offsets (pull et push)

Ajoutez les classes .pull ou .push pour pousser un enfant vers sa droite ou sa gauche.

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass
.push
Lorem Elsass

Réordonner les éléments

Les classes .item-first et .item-last servent à réordonner visuellement les éléments.

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
.item-first

Inverser la grille

Il est possible d'inverser totalement le sens de lecture de la grille grâce au suffixe --reverse

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

Le résultat :

preums
deuz
troiz

Taille d'écran intermédiaire

Vous pouvez indiquer le nombre de colonnes souhaitées lorsque la taille d'écran est intermédiaire (entre tiny et medium, soit entre 544px et 991px par défaut) à l'aide d'un suffixe -small-N (avec N entre 1 et 4).
Par exemple, un conteneur .grid-3-small-2 disposera de 1 colonne en mobile (cas par défaut), puis 2 colonnes en écran intermédiaire, puis 3 colonnes sur grand écran.

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass
Lorem
Lorem Elsass

Cela fonctionne avec des gouttières (classe .has-gutter) ainsi qu'avec des dimensions explicites sur les enfants

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass
.one-quarter
.three-quarters

Votre grille avec des mixins Sass

Le préprocesseur Sass (version .scss) permet d'étendre les possibilités de Grillade, voire de concevoir votre propre grille. Pour commencer, il est très facilement possible de modifier les variables de taille de gouttière ($grid-gutters).

Vous pouvez également concevoir vos propres colonnes. Le mixin suivant, appliqué à votre classe .grid-perso construira une grille de 4 colonnes sans gouttière : .grid-perso { @include grid(4, 0); }

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass
Lorem
Lorem Elsass

Avec gouttière personnalisée, cela pourrait donner : .grid-perso { @include grid(4, 1rem); }

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

Le résultat :

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem Elsass
Lorem
Lorem Elsass

Et maintenant, à vous de jouer !