Grille et points de rupture - Grid and breakpoints

 

Le système de grille sur 12 colonnes proposée par le DSFR vous permet de structurer vos contenus. Il met à disposition 5 mises en page, basées sur 4 points de rupture.

Caractéristiques de la grille

Mise en page

Valeurs en px

Résolution maquette en px

Token

Largeur max. du contenu

Tailles des gouttières (optionnelles)

Mise en page

Valeurs en px

Résolution maquette en px

Token

Largeur max. du contenu

Tailles des gouttières (optionnelles)

XS

de 0 à 575

320

 

/

16 px

Point de rupture SM : 576 pixels

SM

de 576 à 767

576

$bp-sm

/

16 px

Point de rupture MD : 768 pixels

MD

de 768 à 991

768

$bp-md

/

16px

Point de rupture LG : 992 pixels

LG

de 992 à 1247

992

$bp-lg

/

24px

Point de rupture XL : 1248 pixels

XL

≥ 1248

1440

$bp-xl

1200

24 px

 

Pour les designers

Par défaut, nous utilisons la grille avec gouttières. Les différentes mises en page sont disponibles dans la librairie afin de vous guider dans la conception de vos maquettes pour chaque résolution.

Nous recommandons de privilégier pour vos maquettes les résolutions suivantes :

  • Mobile (XS) : 320px

  • Desktop (XL) : 1440px

 

Pour les développeurs

Par défaut la grille est proposée sans gouttière, et avec des marges externes dans le code. Vous pouvez néanmoins utiliser les modificateurs disponibles pour

  • ajouter les gouttières de la grille

  • supprimer les marges externes

  • adapter la largeur et l’affichage de vos blocs de contenu

 

Affichages et alignements

Il est possible d’adapter la grille à votre besoin, en utilisant les différentes classes à votre disposition.

Ajouter ou supprimer des marges externes et ou gouttières

Mise en page avec marge externe et sans gouttière (par défaut)

1 2 3 4 5 6 7 <div class="fr-container"> <div class="fr-grid-row"> <div class="fr-col"></div> <div class="fr-col-4"></div> <div class="fr-col-12 fr-col-lg-4"></div> </div> </div>

 

Mise en page avec marge externe et avec gouttière

Il est possible d’ajouter des gouttières de 16 ou 24px selon votre résolution (voir tableau ci-dessus), à l’aide du modificateur fr-grid-row--gutters .

1 2 3 4 5 6 7 <div class="fr-container"> <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col"></div> <div class="fr-col-4"></div> <div class="fr-col-12 fr-col-lg-4"></div> </div> </div>

 

Mise en page sans marge externe et sans gouttière

Pour l'utiliser, il suffit d’ajouter le modificateur fr-container--fluid.

1 2 3 4 5 6 7 <div class="fr-container fr-container--fluid"> <div class="fr-grid-row"> <div class="fr-col"></div> <div class="fr-col-4"></div> <div class="fr-col-12 fr-col-lg-4"></div> </div> </div>

 

Mise en page sans marge externe et avec gouttière

Pour l’utiliser il suffit d’intégrer le modificateur fr-container--fluid et de le combiner avec le modificateurfr-grid-row--gutter .

1 2 3 4 5 6 7 <div class="fr-container fr-container--fluid"> <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col"></div> <div class="fr-col-4"></div> <div class="fr-col-12 fr-col-lg-4"></div> </div> </div>

 

Ajuster la largeur des blocs de contenu

Les blocs de contenu peuvent s’afficher selon vos besoins, sur une ou plusieurs colonnes de la grille, grâce à la classe fr-col.

Nous formulons cependant des recommandations pour la majorité des composants afin de vous guider (exemple : 8 colonnes max. pour le corps de texte)

Détail sur l’utilisation de “fr-col”

Classe

Description

Exemple

Classe

Description

Exemple

fr-col

Calculé automatiquement en fonction du nombre fr-col intégré dans le code

Si vous utilisez 4 classes fr-colvotre interface affichera 4 colonnes de même taille.

fr-col-n

La largeur de la colonne est définie par n/12

Si n=8. La largeur de la celulle sera équivalente à 8/12 soit 66,6666%

fr-col-layout-n

Identique à fr-col-n mais appliqué à un layout. ( SM, MD, LG et/ou XL)

fr-col-12 fr-col-sm-8 fr-col-md-6 fr-col-lg-4 fr-col-xl-2 appliquera

  • 100% de largeur de 0 à 575px (fr-col-12 : fr-col-xx est la valeur mobile par défaut)

  • 66.6666% de largeur de 576px à 767px,

  • 50% de largeur de 768px à 991px,

  • 33.3333% de largeur de 992px à 1199px

  • 16.6666% de largeur au delà de 1200px

Ajuster l’alignement des contenus

Vous pouvez personnaliser l'alignement vertical ou horizontal d’un contenu, en utilisant les modificateurs suivants :

  • Alignement horizontal : fr-grid-row--left, fr-grid-row--right, fr-grid-row--center

1 2 3 4 5 <div class="fr-container"> <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center"> <div class="fr-col-4"></div> </div> </div>

 

  • Alignement vertical : fr-grid-row--top, fr-grid-row--bottom, fr-grid-row--middle

1 2 3 4 5 <div class="fr-container"> <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--bottom"> <div class="fr-col-4"></div> </div> </div>

Vous pouvez créer des décalages dans la grille en utilisant la classe fr-col-offset-n. La valeur N représente le nombre de colonnes que vous souhaitez laisser vides à gauche du bloc.

  • fr-col-offset-1 : laissera 1 colonne vide

  • fr-col-offset-2 : laissera 2 colonnes vides

  • etc

Ce décalage peut être identique sur toutes les mises en page, ou s’adapter à chaque mise en page.

  • fr-col-offset-3 associé à fr-col-offset-sm-4 : laissera 3 colonnes vides en XS et 4 à partir de SM

Vous pouvez mettre ce décalage à la droite du bloc avec le modificateur fr-col-offset-3--right

 

Exemple d’un décalage commun à toutes les mises en page

1 2 3 4 5 <div class="fr-container"> <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-offset-4"></div> </div> </div>

 

Exemple d’un décalage différent sur chaque mise en page

1 2 3 4 5 <div class="fr-container"> <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-offset-1 fr-col-offset-sm-3 fr-col-offset-md-6"></div> </div> </div>

 

Règles d’utilisation

Usage

  • Pour que la grille s’affiche correctement, il faut respecter la structure : fr-container ou fr-container--fluid contenant fr-grid-row qui lui même contient vos différentes colonnes (fr-col etc.).

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :