Grille de page simple
"Grillade" est un système de grille simple et élaboré avec CSS3 Flexbox. Il est intégré par défaut dans le micro-framework KNACSS.
Une grille simple, mono-ligne
Il faut appliquer 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 :
La même avec gouttière
L'ajout de la classe .has-gutter créer 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 :
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 :
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 :
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 :
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 :
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 :
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 :
Les offsets (pull et push)
Il faut ajouter 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 :
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 :
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 :
Taille d'écran intermédiaire
Il est possible 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 :
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 :
Grille personnalisée 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).
Il est également possible de concevoir vos propres colonnes. Le mixin suivant, appliqué à une classe créée .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 :
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 :
Et maintenant, à vous de jouer !