La grille devrait elle évoluer ou se tenir de côté pour un nouveau module?

Vous avez une disposition de style Pinterest à construire, mais vous en avez assez de JavaScript. CSS pourrait-il enfin avoir la réponse? Eh bien, pour un débutant, en jetant un coup d’œil aux épingles sur votre page Pinterest, vous pourriez être convaincu que la disposition de la grille CSS est suffisante, mais pas avant que vous ne commencez à construire display: grid avec des ajustements supplémentaires est moins que suffisant. En fait, Pinterest a construit sa disposition avec JavaScript, mais à quel point serait-il cool s’il n’était que CSS? S’il y avait une propriété d’affichage CSS qui a donné une telle mise en page sans aucun JavaScript supplémentaire, à quel point serait-ce génial?

Peut-être qu’il y en a. La disposition de la grille CSS a un valeur de maçonnerie expérimentale pour grid-template-rows. La disposition de la maçonnerie est une grille irrégulière et fluide. Irrégulier dans le sens où, au lieu de suivre un motif de grille rigide avec des espaces laissés après des pièces plus courtes, les éléments de la ligne suivante d’une disposition de maçonnerie montent pour remplir les espaces sur l’axe de maçonnerie. C’est le rêve des portefeuilles, des galeries d’images et des flux sociaux – des conceptions qui prospèrent sur le flux organique. Mais voici la capture: Bien que cette fonctionnalité expérimentale existe (pensez à Firefox tous les soirs avec un drapeau activé), ce n’est pas la solution transparente que vous pourriez vous attendre, grâce à un support limité du navigateur et à quelques bords rugueux dans sa forme actuelle.

Peut-être qu’il n’y en a pas. CSS manque de support de maçonnerie indigène, forçant les développeurs à utiliser des hacks ou des bibliothèques JavaScript comme Maçonnerie.js. Les développeurs ayant une bonne conception ont exprimé leurs critiques sur la forme de maçonnerie CSS Grid, avec Rachel soulignant que Le flux organique de la maçonnerie contraste avec la structure bidimensionnelle stricte de la grilleles développeurs potentiellement déroutants s’attendant à un comportement de type grille ou Un mouton du Affiche sur la façon dont il rend la disposition de la grille plus complexe qu’elle ne devrait l’être, potentiellement accablant les développeurs qui apprécient la clarté de la grille pour les dispositions structurées. Geoff fait également écho à l’inquiétude de Rachel Andrew que «L’enseignement et l’apprentissage de la grille pour comprendre le comportement de maçonnerie regroupent inutilement deux contextes de formatage différents en un seul», «  Complication de l’éducation pour les concepteurs et les développeurs qui comptent sur des modèles mentaux clairs.

Peut-être qu’il pourrait y avoir de l’espoir. L’équipe d’Apple Webkit vient de parvenir à un nouveau concurrent, qui prétend non seulement fusionner les avantages de la grille et de la maçonnerie dans un raccourci unifié du système mais comprend également des concepts Flexbox. Imaginez le meilleur des trois systèmes de disposition CSS en un.

Compte tenu de ces plaintes et critiques – et un nouveau gars dans le jeu – la question est:

La grille CSS devrait-elle se développer pour manipuler la maçonnerie, ou si un nouveau module dédié prendra le relais, ou devrait item-flow Prenez juste les rênes?

L’état de maçonnerie en CSS aujourd’hui

Plusieurs développeurs ont tenté de créer des solutions de contournement pour réaliser une disposition de maçonnerie dans leurs applications Web en utilisant la grille CSS avec des hacks manuels, des colonnes CSS et des bibliothèques JavaScript. Sans maçonnerie indigène, les développeurs se tournent souvent en hacks de grille comme ceci: un grid-auto-rows Trick associé à JavaScript pour simuler le flux. Cela fonctionne – en quelque sorte – mais les fissures montrent rapidement.

Par exemple, l’exemple ci-dessous s’appuie sur JavaScript pour mesurer la hauteur de chaque élément après le rendu, calculer le nombre de lignes 10px (plus les lacunes) L’élément doit s’étendre lors du réglage grid-row-end Dynamiquement, et utilisez des écouteurs d’événements pour ajuster la mise en page lors du chargement de la page et du redimensionnement de la fenêtre.

/* HTML */
<div class="masonry-grid">
  <div class="masonry-item"><img src="https://smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/image1.jpg" alt="Image 1"></div>
  <div class="masonry-item"><p>Short text content here.</p></div>
  <div class="masonry-item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="masonry-item"><p>Longer text content that spans multiple lines to show height variation.</p></div>
</div>

/* CSS */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
  grid-auto-rows: 10px; /* Small row height for precise spanning */
  grid-auto-flow: column; /* Fills columns left-to-right */
  gap: 10px; /* Spacing between items */
}

.masonry-item {
  /* Ensure content doesn’t overflow */
  overflow: hidden;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-item p {
  margin: 0;
  padding: 10px;
}

// JavaScript

function applyMasonry() {
  const grid = document.querySelector('.masonry-grid');
  const items = grid.querySelectorAll('.masonry-item');

  items.forEach(item => {
    // Reset any previous spans
    item.style.gridRowEnd = 'auto';

    // Calculate the number of rows to span based on item height
    const rowHeight = 10; 
    const gap = 10; 
    const itemHeight = item.getBoundingClientRect().height;
    const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));

    // Apply the span
    item.style.gridRowEnd = `span ${rowSpan}`;
  });
}

// Run on load and resize
window.addEventListener('load', applyMasonry);
window.addEventListener('resize', applyMasonry);

Ce piratage de grille nous rapproche d’une mise en page de maçonnerie – pile les éléments, remplissez les lacunes et il a l’air assez décent. Mais soyons réels: ce n’est pas encore là. L’échantillon de code ci-dessus, contrairement aux natifs grid-template-rows: masonry (qui est expérimental et n’existe que sur Firefox tous les soirs), s’appuie sur JavaScript pour calculer les portées, battant le rêve «no javascript». La logique JavaScript fonctionne en recalculant les portes sur le redimensionnement ou le changement de contenu. Comme Chris Coyier Remarquée dans sa critique de hacks similaires, cela peut conduire à la retard sur des pages complexes.

De plus, l’ordre logique DOM pourrait ne pas correspondre au flux visuel, une préoccupation Rachel Andrew élevé sur les dispositions de maçonnerie en général. Enfin, si les images se chargent lentement ou si le contenu se déplace (par exemple, support de support paresseux), les portées ont besoin de recalculs, de risques de disposition. Ce n’est pas vraiment le hack idéal; Je suis sûr que tu serais d’accord.

Les développeurs ont besoin d’une expérience fluide, et ergonomiquement, pirater la grille avec des scripts est un acte de jonglerie mentale. Cela vous oblige à basculer entre CSS et JavaScript pour modifier une mise en page. Une solution native, qu’elle soit alimentée par une grille ou un nouveau module, doit clouer la réactivité sans effort, un rendu soigné et un flux de travail qui ne vous fait pas briser vos outils.

C’est pourquoi ce débat est important – notre Daily Grind l’exige.

Option 1: Extension de la grille CSS pour la maçonnerie

Une voie à suivre consiste à renforcer la grille CSS avec des pouvoirs de maçonnerie. Au moment d’écrire ces lignes, les grilles CSS ont été étendues pour accueillir la maçonnerie. grid-template-rows: masonry est une ébauche de CSS Grid Level 3 qui est actuellement expérimentale dans Firefox Nightly. Les colonnes de cette disposition resteront comme un axe de grille pendant que la ligne prend la maçonnerie. Les éléments enfants sont ensuite disposés par article le long des lignes, comme avec le placement automatique de la disposition de la grille. Avec cette disposition, les éléments s’écoulent verticalement, respectant les pistes de colonne mais pas les contraintes de ligne.

Cette option laisse la grille comme votre système de disposition incontournable, mais lui permet de gérer les piles fluide et remplissantes dont nous avons envie.

.masonry-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;
}

Tout d’abord, le style de maçonnerie de grille s’appuie sur la familiarité et l’outillage robustes de CSS Grid (par exemple, le support Devtools). En tant que développeur frontal, il y a une chance que vous avez joué avec grid-template-columns ou grid-areadonc vous êtes à mi-chemin de la matrice d’apprentissage. La maçonnerie ne fait que les capacités existantes, éliminant la nécessité d’apprendre une toute nouvelle syntaxe à partir de zéro. En outre, l’outillage robuste de Grid est livré avec la superposition de grille de Chrome Devtools ou l’inspecteur de mise en page de Firefox, supprimant le besoin de hacks JavaScript.

Pas si vite: il y a des limites. Les spécifications de la grille incluent déjà des propriétés comme align-content et grid-auto-flow. Empiler la maçonnerie sur la liste risque de le transformer en labyrinthe.

Alors il y a les cas de bord. Que se passe-t-il lorsque vous voulez qu’un élément couvre plusieurs colonnes et flux de style maçonnerie? Ou lorsque les lacunes entre les éléments ne s’alignent pas entre les colonnes? Les spécifications sont toujours brumeuses ici, et les premiers tests suggèrent les bogues comme les éléments sautant imprévisiblement si le contenu se charge dynamiquement. Ce problème pourrait briser les dispositions, en particulier sur les conceptions réactives. Le problème de compatibilité du navigateur existe également. Il est toujours expérimental, et même avec des polyfills, il ne fonctionne pas sur d’autres navigateurs à l’exception de Firefox tous les soirs. Pas quelque chose que vous voudriez essayer dans le projet de votre prochain client, non?

Option 2: un module de maçonnerie autonome

Et si nous avions un display: masonry Approche à la place? Offrez-moi quelques minutes. Ce n’est pas seulement un vœu pieux. Les premiers chats de groupe de travail CSS ont flotté l’idée, et cela vaut la peine de imaginer comment cela pourrait améliorer les dispositions. Plongeons dans la vision, comment Cela pourrait fonctionner, et quoi il gagne ou perd dans le processus.

Imaginez un système de mise en page qui ne s’appuie pas sur les pistes rigides de la grille ou le flux linéaire de Flexbox, mais prospère plutôt sur l’empilement vertical avec une tournure horizontale. Le but? Une ardoise propre pour le look de signature de la maçonnerie: articles en cascade des colonnes, remplissant les lacunes naturellement, aucun piratage requis. Inspiré par les murmures dans les discussions CSSWG et la proposition alternative de l’équipe Chrome, ce module prioriser la fluidité sur la structuredonnant aux concepteurs un outil qui semble aussi intuitif que les dispositions qu’ils chassent. Pensez à Pinterest mais sans échafaudage JavaScript.

Voici le terrain: un display valeur nommée masonry lance un système basé sur le débit où les éléments s’empilent verticalement par défaut, en réglant horizontalement pour s’adapter au conteneur. Vous contrôlez la direction et l’espacement avec des propriétés simples comme les suivantes:

.masonry {
  display: masonry;
  masonry-direction: column;
  gap: 1rem;
}

Vous voulez plus de contrôle? Extras hypothétiques comme masonry-columns: auto pourrait imiter la grille repeat(auto-fill, minmax())alors que masonry-align: balance pourrait même sortir des longueurs de colonne pour un look poli. Il s’agit moins de placement précis (force de la grille) et plus de laisser le contenu respirer et couler, s’adapter à la taille de l’écran qui lui est lancée. La grande victoire ici est une pause propre de l’ordre rigide de la grille. Un module autonome les maintient distincts: Grille pour commande, maçonnerie pour le flux. Plus de lutte avec des propriétés de grille qui ne correspondent pas tout à fait; Vous obtenez un système adapté au travail.

Bien sûr, ce n’est pas toutes des voiles lisses. Une toute nouvelle spécification signifie à partir de zéro. Les vendeurs de navigateur devraient se rallier derrière, ce qui peut être lent. Aussi, cela pourrait conduire à confusion de choixavec des développeurs posant des questions comme: «Est-ce que j’utilise la grille ou la maçonnerie pour cette galerie?» Mais écoutez-moi: ce module proposé pourrait boucler les eaux avant qu’il ne les élimine, mais après que l’eau soit claire, elle est sûre pour la piste de tous.

Flux d’objets: une résolution de mise en page unifiée

En mars 2025, L’équipe Webkit d’Apple a proposé le flux d’élémentsun nouveau système qui unifie les concepts de Flexbox, Grid et Masonry en un seul ensemble de propriétés. Plutôt que de choisir entre améliorer la grille ou créer un nouveau module de maçonnerie, le flux d’objets fusionne leurs forces, remplaçant flex-flow et grid-auto-flow avec un sténographie appelé item-flow. Ce système présente quatre propriétés à la main à long terme:

• item-direction
  Contrôle la direction du flux (par exemple, row, column, row-reverse).
• item-wrap
  Gère le comportement d’emballage (par exemple, wrap, nowrap, wrap-reverse).
• item-pack
  Détermine la densité d’emballage (par exemple, sparse, dense, balance).
• item-slack
  Ajuste la tolérance aux réglages de disposition, permettant aux articles de rétrécir ou de se déplacer pour s’adapter.

L’écoulement des éléments vise à faire de la maçonnerie un résultat naturel de ces propriétés, pas une caractéristique distincte. Par exemple, une disposition de maçonnerie pourrait être réalisée avec:

.container {
  display: grid; /* or flex */
  item-flow: column wrap dense;

  /* long hand version */
  item-direction: column;
  item-wrap: wrap;
  item-pack: dense;

  gap: 1rem;
}

Cette configuration permet aux articles de s’écouler verticalement, de s’envelopper dans des colonnes et de serrer étroitement, imitant la disposition organique de la maçonnerie. L’option d’emballage dense, inspirée des grilles auto-flow: denseréorganise les éléments pour minimiser les lacunes, tandis que item-slack pourrait affiner l’espacement pour l’équilibre visuel.

La promesse du flux d’objets réside dans son Cas d’utilisation large. Il améliore la grille et le flex-box avec des fonctionnalités comme nowrap pour la grille ou balance Emballage pour Flexbox, aborder des listes de souhaits de développeur de longue date. Cependant, la proposition est toujours en discussion et propriétés comme item-slack faire face à des débats de dénomination en raison de problèmes de clarté pour les anglophones non natifs.

L’inconvénient? L’écoulement des éléments est un concept orientéet il n’a pas encore été mis en œuvre dans les navigateurs en avril 2025. Les développeurs doivent attendre la normalisation et l’adoption, et le groupe de travail CSS recueille toujours des commentaires.

Quel est le bon chemin?

Bien qu’il n’y ait pas de réponse directe à cette question, le débat de la maçonnerie dépend de l’équilibrage de la simplicité, des performances et de la flexibilité. Étendre la grille avec la maçonnerie est tentant mais les risques trop compliqué un système déjà robuste. Un autonome display: masonry Le module offre de la clarté mais Ajoute à la courbe d’apprentissage de CSS. L’écoulement des éléments, le nouveau concurrent, propose un système unifié qui pourrait faire de la maçonnerie une extension naturelle de la grille et du flexion, mettant enfin le débat.

Chaque approche a des compromis:

• Grille avec maçonnerie: Familier mais potentiellement maladroit, avec accessibilité et préoccupations de spécifications.
• Nouveau module: Propre et construit à un objectif, mais nécessite d’apprendre une nouvelle syntaxe.
• Flux d’articles: Élégant et polyvalent mais pas encore disponible, avec des débats en cours sur la dénomination et la mise en œuvre.

La capacité du flux d’objets à améliorer les dispositions existantes tout en soutenant la maçonnerie en fait une option convaincante, mais son succès dépend de l’adoption du navigateur et du soutien communautaire.

Conclusion

Alors, où atterrions-nous après tout cela? L’épreuve de maçonnerie se résume à trois chemins: l’extension de la maçonnerie dans la grille CSS, un module autonome pour la maçonnerie ou l’écoulement des éléments. Maintenant, la question est, CSS nous libérera enfin de JavaScript pour la maçonnerieou rêvons-nous toujours?

Grid nous taquine avec un goût, et les promesses de chuchotement d’un module autonome – mais la ligne d’arrivée n’est pas claire, et Webkit se déroule avec un sténographie de fusion tueur, un flux d’objets. L’adhésion du navigateur, la poussée communautaire et quelques autres révisions de spécifications pourraient nous le dire. Pour l’instant, c’est votre déménagement – tester, ajuster et peser. La réponse arrive, une disposition à la fois.

Références

(GG, YK)