Mise en page en maçonnerie : approches CSS et JS

Une mise en page en mosaïque place les éléments dans des colonnes où chacun remplit le prochain espace vertical disponible, comme sur Pinterest. Les éléments ont des largeurs de colonne identiques, mais des hauteurs variables. Le résultat est une grille dense et visuellement dynamique, sans espace blanc inutilisé entre les lignes.

Chrome et Firefox, lorsqu’ils sont exécutés derrière une fonctionnalité expérimentale, prennent en charge grid-template-rows: masonry. Les éléments sont placés dans des colonnes, mais les lignes prennent la hauteur de leur contenu, ce qui permet aux éléments de hauteur variable de s’assembler sans espaces. C’est la future solution native.

Les colonnes CSS créent une mise en page semblable à une mosaïque : columns: 3; column-gap: 1rem. Les éléments s’écoulent automatiquement de haut en bas dans chaque colonne. Limitation : les éléments sont ordonnés colonne par colonne (haut de la colonne 1, haut de la colonne 2, etc.) et non ligne par ligne, ce qui affecte l’ordre de lecture et l’accessibilité.

Empêchez les éléments de se scinder entre les colonnes avec break-inside: avoid sur chaque élément. Sans cette règle, une carte très haute peut se diviser entre deux colonnes et couper son contenu en deux. Ajoutez-la toujours lorsque vous utilisez les colonnes CSS pour du contenu présenté sous forme de cartes.

Masonry.js (par David DeSandro) repositionne les éléments positionnés absolument en calculant la hauteur des colonnes et en plaçant chaque élément dans la colonne la moins haute. Isotope ajoute à cela le tri et le filtrage. Les deux nécessitent JavaScript pour calculer et appliquer les positions.

Une approche légère consiste à définir une grille avec des colonnes fixes et des lignes de 1 pixel, puis à utiliser JS pour définir grid-row-end: span N sur chaque élément en fonction de la hauteur de son contenu et de celle d’une ligne. Les éléments conservent l’alignement des lignes de la grille tout en obtenant des hauteurs variables.

Les positions de la mosaïque deviennent obsolètes lorsque la taille de la fenêtre change ou lorsque les images sont chargées. Utilisez ResizeObserver pour détecter les changements de taille et déclencher un recalcul. Regroupez les recalculs par temporisation afin d’éviter des calculs excessifs pendant les redimensionnements rapides.

Les images dont la hauteur est inconnue obligent la mosaïque à être recalculée après leur chargement. Fournissez des attributs explicites de largeur et de hauteur sur toutes les images afin que le navigateur réserve de l’espace avant le chargement. Cela évite les décalages de position et réduit le nombre de passes de recalcul.

Ajouter des éléments à une mise en page en mosaïque nécessite de recalculer uniquement les colonnes concernées (celles des nouveaux éléments), et non toute la grille. Les bibliothèques comme Masonry.js prennent en charge l’animation d’ajout des éléments et la mise en page incrémentielle, sans recalcul complet à chaque nouveau lot.

L’ordre visuel d’une mosaïque diffère de l’ordre du DOM dans les mises en page positionnées par JavaScript. Veillez à ce que l’ordre de tabulation suive l’ordre du DOM (la séquence de lecture logique) et non la position visuelle. Ajoutez tabindex avec précaution ou appuyez-vous sur le flux naturel du DOM pour la navigation au clavier.

Colonnes CSS : simples, sans JS, mais avec une séquence de lecture par colonnes (et non par lignes) et sans filtrage ni tri. Mosaïque avec la grille : pas encore prise en charge en production. Mosaïque JavaScript : complète, mais elle alourdit l’application et ajoute un délai de rendu, car les positions sont calculées après le chargement du contenu.

Quelle propriété CSS empêche une carte de se scinder entre deux colonnes CSS ?

Une mise en page en mosaïque peut être obtenue avec les colonnes CSS (simples, mais ordonnées par colonnes), avec grid-template-rows: masonry expérimental, prometteur pour l’avenir, ou avec des bibliothèques JavaScript comme Masonry.js, complètes et dotées de fonctions de tri et de filtrage. Chaque approche implique des compromis entre simplicité, accessibilité et capacités.