Pourquoi la grille CSS ne suffit pas pour les mises en page de maçonnerie

Une méthode facile à utiliser pour mettre en œuvre des dispositions de maçonnerie est recherchée depuis longtemps par la communauté des développeurs Web. Il a été difficile de créer ces grilles esthétiquement dynamiques en utilisant uniquement CSS, grâce à Pinterest et aux designs associés. L'équipe Chrome affirme que cette stratégie n'est peut-être pas la meilleure, malgré les recommandations récentes qui appellent à l'ajout de fonctionnalités de maçonnerie à la spécification CSS Grid Layout. Voici quelques raisons pour lesquelles nous pensons que la maçonnerie devrait avoir sa propre technique d'implantation et quelques avantages potentiels pour les promoteurs.

Les arguments contre l'ajout de maçonnerie à la grille CSS

1. Problèmes de performances

Les mises en page CSS Grid et maçonnerie gèrent le placement des éléments de manières fondamentalement différentes :

• Grille CSS : tous les éléments sont placés avant la mise en page, permettant au navigateur de calculer la taille et l'emplacement exacts des pistes.
• Maçonnerie : les éléments sont placés au fur et à mesure qu'ils sont disposés, ce qui nécessite des calculs dynamiques qui peuvent entraîner des problèmes de performances importants lors du mélange de tailles de voies fixes et intrinsèques.

Considérez une grille avec des définitions de pistes mixtes comme grid-template-columns : 200px auto 200px. Avec la maçonnerie, le navigateur doit pré-disposer chaque élément dans toutes les configurations possibles, créant ainsi une complexité exponentielle dans les grandes grilles. Ceci est particulièrement problématique lors de l'utilisation de fonctionnalités avancées telles que les sous-grilles.

Pour éviter de livrer une méthode de mise en page avec de telles limitations inhérentes, nous proposons une solution qui sépare la maçonnerie de CSS Grid.

2. Complexité des spécifications

La fusion de la maçonnerie dans la spécification de la grille introduit des incohérences qui entrent en conflit avec les principes fondamentaux du formatage des contextes :

• Propriétés d'alignement : la grille prend en charge six propriétés d'alignement, mais la maçonnerie n'utiliserait qu'un sous-ensemble, comme flexbox.
• Propriétés de placement : la grille a quatre propriétés de placement (par exemple, grille-colonne-début), alors que la maçonnerie n'en aurait besoin que de deux.
• Dimensionnement des pistes : certains modèles comme les colonnes de modèle de grille : répéter (remplissage automatique, contenu maximum) ont du sens en maçonnerie mais doivent rester invalides dans la grille.

L'introduction de ces écarts augmente la charge cognitive des développeurs, car ils devraient se rappeler quelles fonctionnalités fonctionnent dans quel contexte. Cette fragmentation pourrait prêter à confusion et à des erreurs.

La proposition : la maçonnerie comme méthode de tracé distincte

Au lieu de regrouper la maçonnerie avec CSS Grid, nous préconisons de la définir comme une méthode de mise en page autonome utilisant display:masonry. Cette approche conserve toute la flexibilité que les développeurs aiment dans la grille tout en évitant les pièges décrits ci-dessus.

Exemple

Disposition de maçonnerie classique

Une disposition simple en maçonnerie avec des colonnes de taille égale peut être réalisée avec :

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Tailles de pistes mixtes

Pour les mises en page avec des colonnes alternées étroites et larges :

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Pistes à taille automatique

Autoriser le dimensionnement automatique des pistes en fonction du contenu :

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

Étendue et placement

Autoriser les éléments à s'étendre sur plusieurs pistes :

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

Avantages d'une disposition de maçonnerie séparée

Clarté : Les développeurs peuvent utiliser la maçonnerie sans se soucier des nuances de compatibilité CSS Grid.

Flexibilité : Toutes les fonctionnalités de type grille restent disponibles sans introduire de nouvelles contraintes.

À l'épreuve du temps : Une spécification de maçonnerie dédiée garantit un comportement cohérent dans tous les navigateurs et évite toute complexité inutile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!