Mise en page en maçonnerie (masonry)
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
Le niveau 3 de la spécification CSS Grid Layout introduit la valeur masonry pour les propriétés grid-template-columns et grid-template-rows. Ce guide explique ce qu'est la mise en page en maçonnerie et comment l'utiliser.
La mise en page en maçonnerie est une méthode d'agencement où un axe utilise une grille stricte classique, généralement les colonnes, et l'autre axe adopte une disposition en maçonnerie. Sur cet axe, au lieu de laisser des espaces après les éléments plus courts, les éléments suivants remontent pour combler les vides.
Création d'une mise en page en maçonnerie
Pour créer la mise en page en maçonnerie la plus courante, les colonnes servent d'axe de grille et les lignes d'axe de maçonnerie, définis avec grid-template-columns et grid-template-rows.
Les éléments enfants du conteneur sont alors placés ligne par ligne, comme avec le placement automatique classique de la grille.
Lorsque les éléments passent sur de nouvelles lignes, ils sont positionnés selon l'algorithme de maçonnerie. Chaque élément est placé dans la colonne où il y a le plus d'espace, ce qui permet d'obtenir une disposition compacte sans alignement strict des lignes.
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
// prettier-ignore
const itemSizes = [
"2em", "3em", "1.6em", "4em", "3.2em",
"3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].style.blockSize = itemSizes[i];
}
Il est également possible de créer une mise en page en maçonnerie où les éléments sont répartis le long des colonnes.
// prettier-ignore
const itemSizes = [
"2em", "3em", "1.6em", "4em", "2.2em",
"3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].style.inlineSize = itemSizes[i];
}
.grid {
display: grid;
gap: 10px;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 100px);
}
Contrôle de l'axe de la grille
Sur l'axe de la grille, le comportement est identique à celui d'une grille classique. Vous pouvez faire en sorte que des éléments s'étendent sur plusieurs pistes tout en restant en placement automatique, en utilisant le mot-clé span. Les éléments peuvent aussi être positionnés à l'aide du positionnement basé sur les lignes.
Mise en page en maçonnerie avec des éléments étendus
Dans cet exemple, deux éléments s'étendent sur deux colonnes, et les autres éléments s'organisent autour d'eux selon la logique de maçonnerie.
<div class="grid">
<div class="item"></div>
<div class="item span-2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item span-2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
}
.span-2 {
grid-column-end: span 2;
}
Cet exemple inclut un élément positionné explicitement sur certaines colonnes. Les éléments avec un placement défini sont placés avant l'application de la disposition en maçonnerie.
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item positioned">positionné.</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-rows: masonry;
}
.positioned {
padding: 1em;
grid-column: 2 / 4;
}
Solutions de repli pour la mise en page en maçonnerie
Dans les navigateurs qui ne prennent pas en charge la disposition en maçonnerie, le placement automatique classique de la grille sera appliqué à la place.
Spécifications
| Specification |
|---|
| CSS Grid Layout Module Level 3 # masonry-layout |
Compatibilité des navigateurs
css.properties.grid-template-columns.masonry
Chargement…
css.properties.grid-template-rows.masonry
Chargement…
Voir aussi
- La propriété
grid-auto-flowpour contrôler le placement automatique des éléments dans la grille - Mise en page en maçonnerie native avec CSS grid (angl.) sur Smashing Magazine (2020)