Mise en page

Grille CSS

Cauri s’appuie sur la grille Flexbox (lignes et colonnes). La grille CSS native n’est pas activée dans cette version, mais les utilitaires d-grid et gap-* permettent déjà d’en profiter.

La mise en page de Cauri repose sur la grille de lignes et de colonnes. Elle suffit pour la grande majorité des écrans.

La grille CSS (display: grid) est une autre technique, qui gère les lignes et les colonnes en même temps. Le système complet de classes (.grid, .g-col-*, .g-start-*) est une option de compilation, désactivée dans la feuille de style fournie : ces classes ne sont donc pas disponibles par défaut.

Une pile avec d-grid et gap#

.d-grid applique display: grid. Sans modèle de colonnes, les enfants s’empilent avec toute la largeur : c’est idéal pour des boutons pleine largeur. .gap-* règle l’espace entre eux.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Faire un virement</button>
  <button class="btn btn-outline-primary" type="button">Consulter mes comptes</button>
</div>

Empilé sur téléphone, côte à côte ensuite#

Combinez d-grid avec une variante responsive (d-md-flex) pour changer de comportement à un point de rupture.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-outline-secondary" type="button">Annuler</button>
  <button class="btn btn-primary" type="button">Valider le virement</button>
</div>

Définir ses propres colonnes#

Pour des colonnes de largeurs précises, déclarez grid-template-columns dans votre feuille de style ou, pour un essai, en ligne. Ici, trois colonnes égales avec un espace de 1 rem.

Solde

Entrées

Sorties

<div class="d-grid gap-3" style="grid-template-columns: repeat(3, 1fr);">
  <div class="bg-body-secondary border p-3">Solde</div>
  <div class="bg-body-secondary border p-3">Entrées</div>
  <div class="bg-body-secondary border p-3">Sorties</div>
</div>

Espaces séparés en lignes et colonnes#

.row-gap-* et .column-gap-* règlent séparément l’espace entre les lignes et entre les colonnes ; ils fonctionnent aussi avec Flexbox. Valeurs de 0 à 5, comme les autres utilitaires d’espacement.

Agence Plateau

Agence Cocody

Agence Yopougon

Agence Marcory

<div class="d-grid row-gap-1 column-gap-5" style="grid-template-columns: repeat(2, 1fr);">
  <div class="bg-body-secondary border p-2">Agence Plateau</div>
  <div class="bg-body-secondary border p-2">Agence Cocody</div>
  <div class="bg-body-secondary border p-2">Agence Yopougon</div>
  <div class="bg-body-secondary border p-2">Agence Marcory</div>
</div>

Utilitaires disponibles

Utilitaires disponibles
Classe	Valeurs	Effet
`.d-grid`, `.d-{palier}-grid`	paliers `sm` à `xxl`	Affiche l’élément en grille CSS. Voir Affichage.
`.gap-{n}`	0 à 5	Espace entre les lignes et les colonnes.
`.row-gap-{n}`	0 à 5	Espace entre les lignes uniquement.
`.column-gap-{n}`	0 à 5	Espace entre les colonnes uniquement.

Activer le système complet en Sass#

Pour obtenir les classes .grid, .g-col-* et .g-start-*, compilez Cauri vous-même avec l’option $enable-cssgrid à true avant l’import, et désactivez au besoin les classes de la grille Flexbox. Voir Sass.

// Votre feuille de style
$enable-cssgrid: true;
$enable-grid-classes: false; // facultatif : retire .row et .col-*

@import "cauri";

Ce que l'option $enable-cssgrid ajoute

Ces classes n’existent pas dans la feuille de style fournie ; elles sont listées pour référence si vous activez l’option.

Ce que l'option $enable-cssgrid ajoute
Élément	Rôle
`.grid`	Conteneur en grille CSS : 12 colonnes, 1 ligne et un espace de 1,5 rem par défaut.
`.g-col-{n}`, `.g-col-{palier}-{n}`	Largeur d’un élément, en nombre de colonnes.
`.g-start-{n}`, `.g-start-{palier}-{n}`	Colonne de départ d’un élément.
`--bs-columns`	Nombre de colonnes de la grille (12 par défaut).
`--bs-rows`	Nombre de lignes de la grille (1 par défaut).
`--bs-gap`	Espace entre les cellules (1,5 rem par défaut).

Bonnes pratiques

À faire

Choisissez la grille CSS pour des mises en page à deux dimensions (tableaux de bord, galeries) et la grille Flexbox pour les pages classiques.
Utilisez d-grid gap-2 pour empiler des boutons pleine largeur sur téléphone.

À éviter

N’attendez pas de classes .grid ou .g-col-* dans la feuille de style fournie : elles ne sont générées qu’après recompilation.
Évitez style="" en production : déplacez vos modèles de colonnes dans votre feuille de style.

Accessibilité

Comme avec Flexbox, l’ordre visuel ne change pas l’ordre de lecture : gardez un ordre de code logique.