# Grille de mise en page

> Un système d'alignement en colonnes et lignes qui organise le placement des blocs et éléments sur une page pour une lecture cohérente.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/grille-de-mise-en-page/

Aligner correctement des éléments à l'œil, colonne après colonne, devient vite intenable dès qu'une page se complexifie : la grille de mise en page résout ce problème en imposant une structure de référence, souvent invisible, sur laquelle viennent se caler texte, images et blocs.

## Traduction concrète dans l'éditeur de blocs

WordPress s'appuie principalement sur CSS Grid et Flexbox pour cela. Le bloc *Colonnes* répartit son contenu en pistes flexibles ajustables en largeur, tandis que certains thèmes blocs définissent une largeur de contenu et une largeur large (*wide*) dans `theme.json`, créant une grille implicite à laquelle les blocs peuvent s'aligner via l'option d'alignement « pleine largeur » ou « large ».

## Exemple de définition CSS Grid pour un thème

```
.wp-block-group.disposition-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--wp--preset--spacing--40);
}
```

## Bon à savoir

- Les réglages `contentSize` et `wideSize` de `theme.json` définissent les deux largeurs de référence de la grille de mise en page d'un thème bloc, utilisées par tous les blocs qui acceptent l'alignement large ou pleine largeur.
- Une grille de mise en page mal pensée pour le mobile casse souvent la lecture sur petit écran : la conception adaptative doit être vérifiée à chaque point de rupture, pas seulement sur desktop.
- Contrairement à une grille CSS générique appliquée à tout le site, la grille de mise en page WordPress reste pilotable bloc par bloc, avec des exceptions possibles pour un bloc spécifique.