« Modèle:Grille » : différence entre les versions

Version du 12 mars 2026 à 20:17

📚 Modèle:Grille

Description

Le modèle {{Grille}} génère un conteneur flexible (basé sur CSS Flexbox) permettant d'aligner facilement divers éléments (comme les bannières du {{Joueur}}, des images, des badges, etc.) sans avoir à écrire de code HTML complexe.

Il gère automatiquement les retours à la ligne générés par MediaWiki (les balises <p>) pour que la mise en page ne soit jamais cassée lors de la rédaction.

Syntaxe

{{Grille
| gap = 
| align = 
| justify = 
| 1 = <!-- Contenu de la grille -->
}}

Paramètres

Paramètre	Description	Valeur par défaut	Exemples de valeurs
`1` (sans nom)	Obligatoire. Le contenu à afficher à l'intérieur de la grille (appels de modèles, images, texte...).	Aucune	`{{Joueur\|...}} {{Joueur\|...}}`
`gap`	L'espacement vertical et horizontal entre les différents éléments de la grille.	`10px`	`5px`, `1em`, `20px`
`align`	L'alignement vertical des éléments sur une même ligne (correspond à la propriété CSS `align-items`).	`stretch`	`center`, `flex-start`, `flex-end`
`justify`	L'alignement horizontal global de la grille (correspond à la propriété CSS `justify-content`).	`flex-start`	`center`, `space-between`, `space-around`

Exemples d'utilisation

1. Utilisation par défaut (Équipe de joueurs)

Idéal pour afficher une liste de membres de l'équipe. L'espacement par défaut de 10px s'applique.

{{Grille|
{{Joueur|The_FaFa_|grade=Officier}}
{{Joueur|Survetman|grade=Intendant}}
{{Joueur|Ayd|grade=Scribe}}
}}

2. Grille centrée avec un espacement personnalisé

Parfait pour afficher une série de petits badges, d'items ou de ressources Minecraft au centre d'une page.

{{Grille|gap=5px|justify=center|align=center|
[[Fichier:Epee_diamant.png|32px|link=]]
[[Fichier:Pioche_fer.png|32px|link=]]
[[Fichier:Pomme_or.png|32px|link=]]
}}

3. Grille très espacée pour des éléments larges

{{Grille|gap=20px|
{{CarteVille|nom=Capitale}}
{{CarteVille|nom=Port}}
}}

Détails techniques

Ce modèle utilise l'extension TemplateStyles pour charger son propre CSS via la sous-page Modèle:Grille/styles.css.
Le CSS intègre la propriété display: contents; sur les balises de paragraphe et les retours à la ligne pour annuler les comportements non désirés du parseur MediaWiki lors des sauts de ligne dans le wikitext.

@@ Ligne 1 : / Ligne 1 : @@
 <includeonly><templatestyles src="Modèle:Grille/styles.css" />
-{{#vardefine:grille_class|nefald-grille-container}}
+<div class="nefald-grille" style="--grille-gap: {{{gap|10px}}}; --grille-align: {{{align|stretch}}}; --grille-justify: {{{justify|flex-start}}};">
-{{#vardefine:grille_style|}}
-{{#switch: {{{direction|row}}}
-| column = {{#vardefine:grille_class|{{{grille_class}}} nefald-grille-direction-column}}
-| row    = {{#vardefine:grille_class|{{{grille_class}}} nefald-grille-direction-row}}
-| default = {{#vardefine:grille_class|{{{grille_class}}} nefald-grille-direction-row}}
-}}
-{{#if:{{{gap|}}}|{{#vardefine:grille_style|{{{grille_style}}}gap: {{{gap}}};}}}}
-{{#if:{{{align|}}}|{{#vardefine:grille_style|{{{grille_style}}}align-items: {{{align}}};}}}}
-{{#if:{{{justify|}}}|{{#vardefine:grille_style|{{{grille_style}}}justify-content: {{{justify}}};}}}}
-<div class="{{{grille_class}}}" {{#if:{{{grille_style|}}}|style="{{{grille_style}}}"}}>
 {{{1}}}
-</div>
+</div></includeonly><noinclude>
-</includeonly><noinclude>
 {{Documentation}}[[Catégorie:Modèle de mise en forme]]
 </noinclude>