Système de grille DSFR
Le DSFR utilise un système de grille à 12 colonnes, flexible et responsive. Toutes les grilles doivent être encapsulées dans un conteneur .fr-container.
Colonnes de base
Utilisez les classes .fr-col-* pour définir la largeur des colonnes (sur 12 colonnes).
Colonnes égales
<div class="fr-grid-row"> <div class="fr-col-6">Colonne 1</div> <div class="fr-col-6">Colonne 2</div> </div>
Colonnes de tailles différentes
Grille responsive
Utilisez les suffixes de breakpoints pour adapter la grille aux différentes tailles d'écran.
Breakpoints DSFR :
- xs : < 36em (576px)
- sm : ≥ 36em (576px)
- md : ≥ 48em (768px)
- lg : ≥ 62em (992px)
- xl : ≥ 78em (1248px)
Mobile first
Les colonnes s'empilent sur mobile et s'affichent côte à côte sur les écrans plus larges.
<div class="fr-grid-row"> <div class="fr-col-12 fr-col-md-6 fr-col-lg-4"> Pleine largeur sur mobile, 50% sur tablette, 33% sur desktop </div> </div>
Espacements (Gutters)
Ajoutez des espacements entre les colonnes avec .fr-grid-row--gutters.
Sans gutters (par défaut)
Avec gutters
<div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-4">Col 1</div> <div class="fr-col-4">Col 2</div> <div class="fr-col-4">Col
3</div> </div>
Alignement
Centrage des colonnes
<div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-6">Colonne centrée</div> </div>
Alignement à droite
<div class="fr-grid-row fr-grid-row--right"> <div class="fr-col-6">Colonne à droite</div> </div>
Décalages (Offset)
Décalez les colonnes vers la droite avec .fr-col-offset-*.
<div class="fr-grid-row"> <div class="fr-col-6 fr-col-offset-3"> Colonne centrée avec offset </div> </div>
Colonnes automatiques (col-auto)
Utilisez .fr-col-auto pour que les colonnes prennent uniquement l'espace nécessaire.
Centrage avec col-auto
Astuce : Combinez des colonnes vides avec .fr-col-auto pour centrer un élément.
<div class="fr-grid-row"> <div class="fr-col"></div> <div class="fr-col-auto">Contenu centré</div> <div class="fr-col"></div>
</div>
Fonctionnement : Les colonnes .fr-col (sans nombre) se partagent l'espace restant de manière égale, poussant ainsi la colonne .fr-col-auto au
centre.
Plusieurs éléments avec col-auto
<div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-auto">Auto 1</div> <div class="fr-col-auto">Auto 2</div> <div
class="fr-col-auto">Auto 3</div> </div>
Combinaison col et col-auto
Une colonne fixe et une qui prend l'espace restant.
<div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-auto">Sidebar</div> <div class="fr-col">Contenu principal</div> </div>
Créer des espaces entre colonnes
Utilisez des colonnes vides pour créer des espaces personnalisés entre vos blocs.
Avec colonne vide (spacer)
Ajoutez une colonne vide entre deux blocs pour créer un espace.
<div class="fr-grid-row"> <div class="fr-col-4">Bloc 1</div> <div class="fr-col-2"><!-- Espace --></div> <div class="fr-col-4">Bloc
2</div> </div>
Avec offset
Alternative : utilisez un offset pour pousser le second bloc.
<div class="fr-grid-row"> <div class="fr-col-4">Bloc 1</div> <div class="fr-col-4 fr-col-offset-2"> Bloc 2 avec espace avant </div> </div>
Espacements variables (responsive)
Changez l'espacement selon la taille d'écran.
Sans espace sur mobile, avec espace sur desktop
<div class="fr-grid-row"> <div class="fr-col-12 fr-col-md-5">Bloc 1</div> <div class="fr-col-12 fr-col-md-5 fr-col-md-offset-2"> Pas d'espace sur mobile, 2
colonnes d'espace sur desktop </div> </div>
Effet "space-between"
Simulez un justify-content: space-between en positionnant un bloc à gauche et l'autre à droite.
Calcul : 4 colonnes (gauche) + 4 colonnes (offset) + 4 colonnes (droite) = 12 colonnes
<div class="fr-grid-row"> <div class="fr-col-4">Bloc gauche</div> <div class="fr-col-4 fr-col-offset-4">Bloc droite</div> </div>
Alternative avec flexbox
Pour un vrai space-between, utilisez les classes utilitaires flexbox du DSFR.
<div class="fr-grid-row" style="display: flex; justify-content: space-between;"> <div>Bloc 1</div> <div>Bloc 2</div> <div>Bloc 3</div>
</div>
Référence rapide
| Classe | Description |
|---|---|
.fr-container |
Conteneur principal (max-width responsive) |
.fr-grid-row |
Ligne de la grille |
.fr-col-* |
Colonne (1-12) |
.fr-col-{bp}-* |
Colonne responsive (sm, md, lg, xl) |
.fr-col-offset-* |
Décalage de colonne (1-11) |
.fr-grid-row--gutters |
Ajoute des espacements entre colonnes |
.fr-grid-row--center |
Centre les colonnes horizontalement |
.fr-grid-row--right |
Aligne les colonnes à droite |