Le système de grille
Le système de grille est une notion centrale pour le DSFR. Si une documentation basique en Markdown n'a pas besoin de cette grille, il est important de la connaître pour les pages plus complexes, avec textes sur plusieurs colonnes, cartes ou tuiles.
La notation utilisée est celle du DSFR, veuillez consulter la documentation officielle pour plus de détails.
Texte sur deux colonnes
Composant
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Extrait de code
/// row
/// col
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
///
/// col
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
///
///
Options de la grille
Options de row
row n'a pas besoin de paramètres par défaut. Cependant, il est possible d'ajouter des classes supplémentaires DSFR pour la définition de row. Ainsi pour mettre en place les gouttières sur une row, vous pouvez utiliser la classe fr-grid-row--gutters :
/// row | fr-grid-row--gutters
...
///
| Option | Valeur par défaut | Description |
|---|---|---|
| halign | Alignement horizontal de la grille. Peut être left, center ou right. |
|
| valign | Alignement vertical de la grille. Peut être top, middle ou bottom. |
Options de col
col n'a pas besoin de paramètres par défaut. Pour définir les différentes classes de largeur d'une colonne, il suffit de les spécifier en paramètres, sans le préfixe fr-col-, séparés par un espace. Par exemple pour définir une colonne de 12 par défaut et 4 en mode large :
/// col | 12 lg-4
///
| Option | Valeur par défaut | Description |
|---|---|---|
| class | Classes supplémentaires à ajouter à la colonne. |
Exemple avec spéficications de largeurs
- Composant
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tuile succès
Une autre description succincte
- Extrait de code
/// row | fr-grid-row--gutters
valign: bottom
/// col | 12 lg-8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
///
/// col | 12 lg-4
/// tile | Tuile succès
picto: system/success
target: https://www.example.com/
Une autre description succincte
///
///
///