Grille et 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)
XS de 0 à 575 320 / 16 px
SM de 576 à 767 576 $bp-sm / 16 px
MD de 768 à 991 768 $bp-md / 16px
LG de 992 à 1247 992 $bp-lg / 24px
XL ≥ 1248 1440 $bp-xl 1200 24 px

Points de rupture

Les points de rupture sont :

  • SM : 576 pixels
  • MD : 768 pixels
  • LG : 992 pixels
  • XL : 1248 pixels

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) 

<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 . 

<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’utiliser la classe fr-container--fluid. 

<div class="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 modificateur fr-grid-row--gutter. 

<div class="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
fr-col Calculé automatiquement en fonction du nombre fr-col intégré dans le code Si vous utilisez 4 classes fr-col votre 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 
<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 
<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 

<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 

<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

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.).

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github