Grille et conteneur (Grid)

Utilisez le conteneur et la grille pour construire des mises en page DSFR responsives sans écrire les classes de colonnes à la main.

info

Ce composant est inclus dans l’offre Community.

Information	Valeur
Niveau	Community
Composants Twig	`dsfr:container`, `dsfr:grid:row`, `dsfr:grid:col`

Usage

dsfr:container rend fr-container ou fr-container--fluid.
dsfr:grid:row gère les gouttières et les alignements DSFR.
dsfr:grid:col accepte les colonnes et offsets par breakpoint.

Modes d'utilisation

Exemple principal
Composition
Attributs HTML

Grille et conteneur · exemple principal
<twig:dsfr:container>
  <twig:dsfr:grid:row gutters>
    <twig:dsfr:grid:col cols="12" md="6">
      <section class="fr-p-3w fr-background-alt--grey">
        <h2 class="fr-h4">Colonne principale</h2>
        <p>Largeur 6/12 à partir de md.</p>
      </section>
    </twig:dsfr:grid:col>
    <twig:dsfr:grid:col cols="12" md="6">
      <section class="fr-p-3w fr-background-alt--grey">
        <h2 class="fr-h4">Colonne secondaire</h2>
        <p>Empilée sur mobile.</p>
      </section>
    </twig:dsfr:grid:col>
  </twig:dsfr:grid:row>
</twig:dsfr:container>

Cette page expose aussi les sous-composants publics suivants : dsfr:grid:row, dsfr:grid:col. Utilisez-les quand vous devez contrôler précisément la structure Twig au lieu de passer un tableau de données.

astuce

Préférez les sous-composants publics aux include, macros ou copies de templates internes. Cela garde votre code aligné avec les évolutions du bundle.

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through
<twig:dsfr:container
  id="grille-example"
  class="fr-mt-2w"
  data-controller="grille"
/>

API publique

Composant	Rôle
`dsfr:container`	Composant principal de cette page.
`dsfr:grid:row`	Sous-composant public utilisable en composition Twig.
`dsfr:grid:col`	Sous-composant public utilisable en composition Twig.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
`fluid`	`bool`	`false`	`dsfr:container` rend `fr-container--fluid` au lieu de `fr-container`.
`gutters` / `noGutters`	`bool`	`false`	`dsfr:grid:row` ajoute ou supprime les gouttières DSFR.
`align`	enum\|null	`null`	`left`, `right`, `center` pour l’alignement horizontal de la ligne.
`valign`	enum\|null	`null`	`top`, `bottom`, `middle` pour l’alignement vertical de la ligne.
`cols`	`int\|string\|null`	`null`	`dsfr:grid:col` rend `fr-col`, `fr-col-1` à `fr-col-12`.
`sm` / `md` / `lg` / `xl`	`int\|string\|null`	`null`	Largeurs responsives `fr-col-{breakpoint}-{1..12}`.
`offset*`	`int\|string\|null`	`null`	Offsets gauche par breakpoint ; `offsetRight` active l’offset à droite.

Guide d'intégration

Question	Réponse
Famille DSFR	Mise en page
Quand l'utiliser	Quand vous composez une page, une zone transverse ou un bloc structurel réutilisable.
Quand éviter	Pour corriger un espacement local : utilisez d’abord les props et classes utilitaires DSFR prévues.
API publique	Utilisez uniquement les composants Twig listés sur cette page : `dsfr:container`, `dsfr:grid:row`, `dsfr:grid:col`.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Grille et conteneur : composition avec 2 sous-composants

Variantes de grille et conteneur

conteneur standard ou fluide, lignes avec ou sans gouttières, colonnes 1 à 12 par breakpoint.

Points de contrôle propres à ce composant

dsfr:container rend fr-container ou fr-container--fluid.
dsfr:grid:row gère les gouttières et les alignements DSFR.
dsfr:grid:col accepte les colonnes et offsets par breakpoint.
Testez la composition avec dsfr:grid:row, dsfr:grid:col sans copier les templates internes.

Accessibilité mise en page

Le composant ne remplace pas les landmarks de votre page : gardez main, nav, aside, section côté application.
Les zones transverses doivent rester identifiables et cohérentes entre les pages.
Vérifiez les ruptures responsive sur mobile, tablette et desktop.

Intégration Symfony/Twig pour `dsfr:container`

Composez avec les sous-composants publics dsfr:grid:row, dsfr:grid:col quand le rendu doit être plus précis que les props.
Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:container quand ils concernent son nœud racine.

Checklist de recette

rendu mobile sans débordement
landmarks présents dans la page
comportement thème clair/sombre si concerné
rendu vérifié en thème clair et sombre ;
rendu vérifié sur mobile, tablette et desktop ;
aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.

Choisir la bonne structure

Utilisez toujours un conteneur pour limiter la largeur du contenu principal, sauf pour une zone volontairement pleine largeur comme une carte interactive ou une section applicative déjà cadrée par un parent.

Besoin	Structure recommandée
Page standard	`dsfr:container` puis une ou plusieurs lignes `dsfr:grid:row`.
Deux colonnes égales	Deux `dsfr:grid:col cols="12" md="6"` pour empiler sur mobile.
Contenu principal + aside	`cols="12" lg="8"` et `cols="12" lg="4"`.
Trois cartes	Trois `cols="12" md="4"`.
Pleine largeur contrôlée	`dsfr:container fluid`, puis vos lignes.
Décalage volontaire	`offset`, `offsetMd`, `offsetLg` ou `offsetRight` sur la colonne.

Recettes prêtes à copier

Page avec contenu et panneau latéral

<twig:dsfr:container>
  <twig:dsfr:grid:row gutters>
    <twig:dsfr:grid:col cols="12" lg="8">
      <main id="contenu">
        {% block content %}{% endblock %}
      </main>
    </twig:dsfr:grid:col>
    <twig:dsfr:grid:col cols="12" lg="4">
      <aside aria-label="Informations complémentaires">
        {% block sidebar %}{% endblock %}
      </aside>
    </twig:dsfr:grid:col>
  </twig:dsfr:grid:row>
</twig:dsfr:container>

Liste de cartes responsive

<twig:dsfr:container>
  <twig:dsfr:grid:row gutters>
    {% for item in items %}
      <twig:dsfr:grid:col cols="12" md="6" lg="4">
        <section class="fr-p-3w fr-background-alt--grey">
          <h2 class="fr-h4">{{ item.title }}</h2>
          <p>{{ item.description }}</p>
        </section>
      </twig:dsfr:grid:col>
    {% endfor %}
  </twig:dsfr:grid:row>
</twig:dsfr:container>

Points de contrôle

La somme des colonnes visibles sur un breakpoint ne doit pas dépasser 12 si vous voulez éviter un retour à la ligne.
Utilisez gutters pour les listes de cartes, formulaires en colonnes et blocs de contenu séparés.
Évitez les colonnes fixes sans valeur mobile : commencez par cols="12", puis ajoutez md, lg ou xl.
N’ajoutez pas manuellement fr-container, fr-grid-row ou fr-col-* autour de ces composants sauf pour intégrer un fragment HTML externe.
Les composants de grille ne créent pas de landmarks ARIA : gardez main, nav, aside, section et les titres dans votre contenu métier.

Dépannage

Symptôme	Cause probable	Correction
Les colonnes restent côte à côte sur mobile	`cols` trop petit sans valeur mobile explicite	Ajoutez `cols="12"` et gardez `md`/`lg` pour desktop.
Une colonne passe à la ligne trop tôt	Somme des colonnes supérieure à 12	Ajustez les largeurs ou acceptez le retour à la ligne.
Il n’y a pas d’espace entre les colonnes	`gutters` absent	Ajoutez `gutters` sur `dsfr:grid:row`.
Le contenu touche les bords de l’écran	Conteneur absent ou `fluid` utilisé au mauvais niveau	Enveloppez la zone dans `dsfr:container`.
Un offset ne s’applique pas du bon côté	`offsetRight` absent	Ajoutez `offsetRight` pour générer les classes d’offset à droite.

Usage​

Modes d'utilisation​

API publique​

Configuration​

Guide d'intégration​

Variantes de grille et conteneur​

Points de contrôle propres à ce composant​

Accessibilité mise en page​

Intégration Symfony/Twig pour dsfr:container​

Checklist de recette​

Erreurs fréquentes​

Choisir la bonne structure​

Recettes prêtes à copier​

Page avec contenu et panneau latéral​

Liste de cartes responsive​

Points de contrôle​

Dépannage​