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.