Layouts et grille

Cette page sert de guide de production pour composer des pages DSFR avec les composants dsfr:container, dsfr:grid:row et dsfr:grid:col. Ces composants sont Community et ne nécessitent pas de licence Pro.

Principes

• Commencez par un dsfr:container pour cadrer le contenu principal.
• Ajoutez fluid uniquement pour les zones qui doivent occuper toute la largeur disponible.
• Placez les colonnes dans un dsfr:grid:row; ajoutez gutters dès que les contenus doivent respirer.
• Déclarez toujours une largeur mobile explicite avec cols="12" puis ajoutez md, lg ou xl.
• Gardez les landmarks HTML (main, nav, aside, section) dans votre template applicatif.

Modèles prêts à adapter

Page contenu + aside

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

Dashboard dense

<twig:dsfr:container fluid>
  <twig:dsfr:grid:row gutters>
    <twig:dsfr:grid:col cols="12" lg="3">
      {% block filters %}{% endblock %}
    </twig:dsfr:grid:col>
    <twig:dsfr:grid:col cols="12" lg="9">
      {% block results %}{% endblock %}
    </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">
        <twig:dsfr:card
          title="{{ item.title }}"
          href="{{ item.href }}"
          description="{{ item.description }}"
        />
      </twig:dsfr:grid:col>
    {% endfor %}
  </twig:dsfr:grid:row>
</twig:dsfr:container>

Formulaire en deux colonnes

<twig:dsfr:container>
  <twig:dsfr:grid:row gutters>
    <twig:dsfr:grid:col cols="12" md="6">
      {{ form_row(form.firstName) }}
    </twig:dsfr:grid:col>
    <twig:dsfr:grid:col cols="12" md="6">
      {{ form_row(form.lastName) }}
    </twig:dsfr:grid:col>
    <twig:dsfr:grid:col cols="12">
      {{ form_row(form.message) }}
    </twig:dsfr:grid:col>
  </twig:dsfr:grid:row>
</twig:dsfr:container>

Valeurs de colonnes

Besoin	Colonnes
Pleine largeur mobile	cols="12"
Deux colonnes à partir de tablette	cols="12" md="6"
Trois colonnes desktop	cols="12" md="6" lg="4"
Contenu + aside	cols="12" lg="8" et cols="12" lg="4"
Zone centrale étroite	cols="12" lg="8" offsetLg="2"
Offset à droite	offsetRight offsetLg="2"

Recette qualité

Point de contrôle	Attendu
Mobile	aucune colonne ne provoque de débordement horizontal
Tablette	les blocs importants restent dans l'ordre logique de lecture
Desktop	la somme des colonnes visibles ne dépasse pas 12 sauf retour à la ligne voulu
Accessibilité	main, nav, aside et titres restent dans le contenu métier
Maintenance	aucune classe fr-col-* ajoutée à la main autour des composants de grille