,

Native masonry layouts with CSS grid lanes – Piccalilli

Bookmarked Native masonry layouts with CSS grid lanes – Piccalilli.

Le masonry en CSS natif, c'est le serpent de mer du front. Le ticket date de 2017. Masonry.js, c’est bientôt fini !

Saleh Mubashar explique chez Piccalilli pourquoi ça a pris autant de temps : Grid étendu, Flexbox ou display à part, le CSSWG a tourné en rond avant de choisir `display: grid-lanes`.

Et c'est plutôt cool. Tu définis tes colonnes avec `grid-template-columns`, un `gap`, et le navigateur range chaque item dans la colonne la plus courte. Plus besoin de connaître la hauteur des cartes. Subgrid reste compatible, et `fit-tolerance` gère les égalités.

Le bémol, c'est que pour l'instant ça marche uniquement dans Safari 26.4+. Fallback obligatoire, donc je vais attendre un peu avant de l'utiliser sur du WordPress en prod. Et attention à l'accessibilité : l'ordre visuel peut diverger de l'ordre du DOM.

Je garde ça sous le coude. Pas pour demain, mais ça arrive.

← Précédent
Suivant →

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. Découvrez comment les données de vos commentaires sont traitées.

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.