# Grille CSS

> Modèle de mise en page CSS permettant d'organiser des éléments simultanément en lignes et en colonnes, avec un contrôle fin de chaque cellule.

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

Reproduire une mise en page de magazine, avec une grande image occupant deux colonnes et plusieurs articles secondaires alignés à côté, exigeait autrefois des empilements de `float` fragiles ou des calculs de largeur en pourcentage pénibles à maintenir. Ce modèle de mise en page a été conçu spécifiquement pour ce genre de structure à deux dimensions.

## Des colonnes et des lignes définies explicitement

Sur un conteneur en `display: grid`, les propriétés `grid-template-columns` et `grid-template-rows` définissent la structure, en acceptant des valeurs fixes, proportionnelles avec l'unité `fr`, ou une fonction comme `repeat()`. Chaque enfant peut ensuite être positionné précisément avec `grid-column` et `grid-row`, ou laissé au placement automatique.

## Exemple

```
.grille-magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.article-principal {
  grid-column: span 2;
}
```

## Bon à savoir

- La fonction `minmax()`, combinée à `repeat(auto-fit, ...)`, permet de créer une grille réellement adaptative sans écrire une seule media query pour ajuster le nombre de colonnes.
- Le bloc natif « Galerie » de l'éditeur WordPress s'appuie sur ce modèle pour répartir automatiquement les images en colonnes régulières, avec un nombre de colonnes réglable directement dans l'interface.
- Ce modèle et Flexbox ne s'excluent pas : on associe couramment une grille pour la structure globale de page et des conteneurs flexibles pour aligner le contenu à l'intérieur de chaque cellule.
- Les zones nommées, déclarées avec `grid-template-areas`, offrent une manière particulièrement lisible de décrire un gabarit complet (en-tête, contenu, barre latérale, pied de page) sans jongler avec des numéros de ligne et de colonne.