La grille¶

La structure repose sur .flex-x, .flex-y et .cell. Sans classe de gouttière, les cellules se partagent l'espace sans espacement.

Les bases gridaflex-settings.scss¶

<div class="flex-x">
  <div class="cell tablet-portrait-6 desktop-4">12 / 6 / 4</div>
  <div class="cell tablet-portrait-6 desktop-8">12 / 6 / 8</div>
</div>

Conteneur gridaflex-settings.scss¶

.flex-container centre le contenu et le limite à $flex-container (1200px par défaut). Variantes : .fluid (pleine largeur) et .full (pleine largeur sans padding).

<div class="flex-container">
  <div class="flex-x">
    <div class="cell phone-4">cell</div>
    <div class="cell phone-4">cell</div>
    <div class="cell phone-4">cell</div>
  </div>
</div>

Dimensionnement automatique¶

.auto occupe l'espace restant, .shrink se réduit au contenu.

<div class="flex-x">
  <div class="cell shrink">Shrink!</div>
  <div class="cell auto">Auto!</div>
</div>

Ajustements responsive¶

Combinez les préfixes phone-, tablet-portrait-, desktop-… Ci-dessous : empilées en petit, équilibrées sur desktop.

<div class="cell phone-12 desktop-auto">…</div>

Offsets¶

Décalent une cellule vers la droite (axe X).

<div class="cell phone-4 desktop-offset-2">…</div>

Block grids gridaflex-settings.scss¶

.[bp]-up-[n] définit le nombre de cellules par ligne au niveau de la grille.

<div class="flex-x flex-gap-x phone-up-2 tablet-portrait-up-3 desktop-up-6">
  …
</div>

Grilles verticales¶

.flex-y répartit les cellules verticalement. La grille doit avoir une hauteur.

<div class="flex-y flex-gap-y" style="height: 500px;">
  <div class="cell phone-6 desktop-2">…</div>
  <div class="cell phone-6 desktop-10">…</div>
</div>

Grid frame¶

.flex-frame fixe la grille à 100 vh (ou 100 % si imbriquée), sans retour à la ligne ni débordement. .cell-block / .cell-block-y rendent une cellule scrollable.

<div class="flex-y flex-frame">
  <div class="cell shrink">Header</div>
  <div class="cell auto cell-block-y">Contenu défilant</div>
  <div class="cell shrink">Footer</div>
</div>