Grille

Le block grid dispose un nombre fixe de cellules libres dans une grille CSS. Utilisez-le lorsque vous avez besoin d'une mise en page personnalisée de contenus, d'images ou d'autres blocks qui ne correspond à aucun des types plus structurés (feature grid, pricing table, team, etc.).

Champs

Champ	Description	Requis ?
heading	Titre de section affiché au-dessus de la grille. Exemple de placeholder : "Featured items".	Non
grid_cols	Nombre de colonnes, à choisir de 1 à 4. Vaut 2 par défaut.	Non
grid_gap	Valeur CSS de gap entre les cellules (par ex. 1rem). Vaut 1rem par défaut.	Non
cell_count	Nombre de cellules à rendre, à choisir de 1 à 6. Vaut 4 par défaut (ou le nombre de cellules existantes).	Non
Cell 1 ... Cell N	Une zone de texte libre par cellule (N = cell_count). Chaque zone accepte du HTML brut, et son placeholder suggère que vous pouvez y imbriquer un shortcode comme {{block:my-block-name​}}.	Non

Sécurité HTML

Le heading est échappé et rendu en texte brut. Le corps de chaque cellule est rendu sans échappement, donc les cellules acceptent le HTML brut. C'est également le seul type de block où le contenu d'une cellule peut lui-même contenir un shortcode {{block:...​}} : les shortcodes de blocks imbriqués dans une cellule de grille sont résolus récursivement au moment du build, ce qui permet de composer d'autres blocks (un callout, un embed, voire une autre grille) à l'intérieur d'une cellule.

Utilisation

{{block:homepage-services-grid​}}

Placez le shortcode dans le corps d'une page ou d'un article à l'endroit où vous voulez que la grille apparaisse. Définissez grid_cols et grid_gap dans l'éditeur d'administration pour contrôler la mise en page ; chaque cellule s'édite comme sa propre zone de texte.

Exemple

Une section "Services" de page d'accueil avec 3 colonnes et 3 cellules, chaque cellule contenant un petit extrait HTML écrit à la main :

Champ	Valeur
heading	Services
grid_cols	3
grid_gap	1.5rem
cell_count	3
Cell 1	<h3>Consulting</h3><p>Strategy and roadmap work.</p>
Cell 2	<h3>Implementation</h3><p>Hands-on build and migration.</p>
Cell 3	{{block:support-callout​}}

La cellule 3 illustre la capacité d'imbrication de blocks : au lieu d'écrire du HTML directement, l'éditeur y dépose un shortcode pour un block callout existant, qui est résolu et rendu sur place lorsque la page est construite.