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.