Grilles - introduction

4 systèmes de grilles sont disponibles :

Dans le cas d'un support IE10+. la flex grid, combinée aux flex utils class sont suffisants. Inutile de charger les autres grilles.
Dans le cas d'un support IE9+, la combinaison des grilles table grid et inline grid sont un bon compromis.
Dans le cas d'un support IE8+, vous devrez vous contenter de l'utilisation de float grid et table grid.

Gouttière

La taille de la gouttière est, par défaut, équivalente au rythme vertical.
Cette valeur est gérée par la var(--gutter) (cf gutter.css)

Taille des Colonnes span

Les grilles permettent diverses compositions avec un système de 2 à 7 colonnes imbricables.
Les tailles des colonnes sont gérés grâce aux class span--*.
La taille de la colonne s'ajoute en option. Ex: span--1-3.
Astuce : cette class est optionnelle (voir exemples).
Une class span--auto est également disponible.

Responsive design

Il est possible de définir une taille différente de colonne pour chaque breakpoints. Il suffit d'ajouter le préfixe du breakpoint a la class span--*. Dans la logique du mobile first, une taille donnée sera valable à partir du breakpoint indiqué et au delà.

  • span--* pour tous les breakpoints
  • s-span--* breakpoint S (small) et +
  • m-span--* breakpoint M (medium) et +
  • l-span--* breakpoint L (large) et +
  • xl-span--* breakpoint XL (extra-large) et +

Exemple

Une colonne avec une [class*='span--'] aura par défaut une largeur de 100%.
Dans l'exemple ci-dessous, les colonnes feront :

  • 100% pour les tailles de viewport XS et S
  • 50% pour les tailles de viewport M
  • 25% pour les tailles de viewport L et +

Options

  • .no-gutter pour une grille sans gouttière
  • .half-gutter pour des tailles de gouttières réduites de moitier
  • .va-top .va-middle .va-top pour modifier l'alignement vertical des colonnes.
    Fonctionne uniquement avec les table grid et inline gird.