L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Disposition de maçonnerie CSS native dans la grille CSS
Un Niveau 3 de la spécification CSS Grid a été publié en tant que brouillon de l'éditeur , ce niveau décrit une façon de faire la mise en page de maçonnerie en CSS. Dans cet article, je vais vous expliquer le projet de spécification, avec des exemples que vous pouvez essayer dans Firefox Nightly. Bien qu'il s'agisse d'une fonctionnalité que vous ne pourrez pas utiliser en production pour le moment, vos commentaires seraient précieux pour vous assurer qu'elle répond aux exigences que vous avez pour ce type de mise en page. Alors jetons un œil.
Qu'est-ce qu'une disposition de maçonnerie?
Une disposition de maçonnerie est celle où les éléments sont disposés les uns après les autres dans le sens en ligne. Lorsqu'ils passent à la ligne suivante, les éléments remontent dans les espaces laissés par les éléments plus courts de la première ligne. C'est similaire à une disposition de grille avec placement automatique, mais sans coller à une grille stricte pour les rangées.
L'exemple le plus connu de maçonnerie est sur Pinterest et vous entendrez parfois des gens se référer à la mise en page en tant que «mise en page Pinterest».
Il existe un certain nombre d'outils JavaScript pour vous aider à créer ce type de mise en page, comme celui de David DeSandro Plugin de maçonnerie .
Ne pouvons-nous pas déjà le faire en CSS?
Nous pouvons nous approcher d'une disposition de maçonnerie de plusieurs façons. Le moyen le plus proche d'obtenir l'apparence de ce type de mise en page est d'utiliser la mise en page multi-colonnes. Dans l'exemple ci-dessous, vous voyez quelque chose qui ressemble visuellement à une disposition de maçonnerie. Cependant, l'ordre des cases descend dans les colonnes. Par conséquent, si les premiers éléments ont la priorité la plus élevée (par exemple, s'il s'agissait de résultats de recherche), alors les premiers éléments apparents dans la rangée supérieure ne sont pas réellement ceux qui sont revenus en premier.
Voir le Exemple de stylo Masonry Multicol de Rachel Andrew ( @rachelandrew ) sur CodePen .
Lorsque les concepteurs ont vu la mise en page Grille pour la première fois, ils ont souvent pensé que l'auto-placement avec le mode d'emballage dense pouvait réaliser la maçonnerie. Bien que vous puissiez combler tous les espaces de cette manière, la mise en page est toujours une grille et il n'y a donc aucun moyen de faire remonter les éléments dans les espaces laissés par les éléments plus courts.
Voir le stylo Exemple de flux automatique de maçonnerie de Rachel Andrew ( @rachelandrew ) sur CodePen .
Par conséquent, pour réaliser la maçonnerie, il faut toujours JavaScript. Faire de la mise en page avec JavaScript – en particulier avec le grand nombre d'éléments qui bénéficient souvent de ce type de mise en page – ne fonctionnera jamais bien. J'ai initialement noté que les développeurs Web demandaient la fonctionnalité en janvier 2017 et même si j'ai quelques inquiétudes quant à savoir s'il s'agit vraiment d'une grille (et aussi du potentiel de problèmes d'accessibilité dus à la réorganisation du contenu)
La fonction de maçonnerie de la disposition de la grille
Ceci est une nouvelle spécification, donc les choses pourraient bien changer avant que cela ne soit disponible dans plus de navigateurs. Cependant, nous sommes dans une bonne position dans la mesure où il existe déjà une implémentation de Masonry dans Firefox. Obtenez une copie de Firefox Nightly et activez le drapeau layout.css.grid-template-masonry-value.enabled dans about: config pour jouer avec. Une fois que vous avez fait cela et que vous êtes revenu sur cette page en utilisant Firefox, toutes les démos fonctionneront.
Pour utiliser la disposition de maçonnerie, l'un de vos axes de grille doit avoir la valeur maçonnerie . On appellera alors cet axe maçonnerie l'autre axe aura des lignes ou des pistes de colonnes définies comme normales, ce sera l'axe de la grille. Le CSS ci-dessous crée une grille à quatre colonnes, avec les lignes définies sur maçonnerie . Les éléments de maçonnerie seront affichés dans les quatre colonnes de mon axe de grille.
.container {
affichage: grille;
grille-modèle-colonnes: répéter (4, 1fr);
grid-template-rows: maçonnerie;
}
C'est tout ce que vous devez faire pour obtenir une disposition de maçonnerie simple. En utilisant Firefox, vous pouvez le voir dans l'exemple CodePen ci-dessous.
See the Pen Basic CSS Masonry de Rachel Andrew ( @rachelandrew ) sur CodePen .
Nous pourrions nous arrêter là, cependant, en ajoutant de la maçonnerie dans CSS Grid signifie que nous pouvons nous attendre à ce que d'autres éléments de la grille fonctionnent même lorsque nous sommes dans une disposition en maçonnerie. Par conséquent, la spécification doit définir ces choses.
Comportement sur l'axe de la grille
L'axe qui a défini des traces se comporte exactement de la même manière qu'une grille régulière. Par conséquent, vous pouvez dimensionner les pistes, nommer les lignes et utiliser l'alignement de la même manière que vous le feriez dans une grille normale.
Vous pouvez également positionner des éléments en utilisant le placement basé sur des lignes sur cet axe. Ceux-ci seront placés en premier avant les éléments de maçonnerie. Dans l'exemple suivant, j'ai placé l'image avec une légende de 5 entre la ligne nommée box-start et la ligne nommée box-end . Les éléments de maçonnerie sont placés autour.
Voir le stylo Maçonnerie avec élément positionné par Rachel Andrew ( @rachelandrew ) sur CodePen .
Il est également possible de franchir les voies normalement sur l'axe de la grille . Dans l'exemple suivant, j'ai quelques éléments qui ont une classe de paysage . Ces éléments s'étendent sur deux pistes de colonne lorsqu'ils sont placés dans la disposition de maçonnerie.
Voir le stylo Exemple de recouvrement de maçonnerie par Rachel Andrew ( @rachelandrew ) sur CodePen .
Le masonry-auto-flow propriété
La spécification de maçonnerie ajoute des propriétés supplémentaires à la disposition de la grille. La propriété masonry-auto-flow n'est pas encore dans l'implémentation Firefox. Une fois implémentée, cette propriété vous donnera le contrôle sur le flux des éléments dans la disposition de la maçonnerie.
En utilisant masonry-auto-flow: next placera l'élément à l'emplacement suivant sur l'axe de la grille plutôt que de l'emballage dans la colonne avec le plus d'espace comme cela se produit par défaut.
En utilisant maçonnerie-auto-flux: ordonné la maçonnerie ignorera les éléments avec un emplacement défini et disposera les éléments en utilisant order -commande de document modifiée ; c'est-à-dire dans l'ordre dans lequel ils sont dans le document, sauf s'ils sont commandés avec la propriété order .
Les propriétés justify-tracks et align-tracks propriétés [19659031] Ces propriétés fonctionnent dans une certaine mesure dans Firefox Nightly au moment de la rédaction. Ce sont des propriétés d'alignement supplémentaires pour les dispositions de maçonnerie. Si vous avez de la maçonnerie dans le sens du bloc, vous pouvez utiliser align-tracks si vous avez de la maçonnerie dans le sens en ligne, utilisez justify-tracks .
Si vous avez de l'espace supplémentaire dans votre conteneur de grille dans la dimension en cours de disposition en maçonnerie, vous découvrirez alors que les éléments s'alignent sur le début du conteneur. La valeur initiale de align-tracks (dans notre cas, la maçonnerie étant créée pour les rangées) est start .
Ces propriétés fonctionnent avec align-content et justify-content . Pour montrer comment, j'ai un exemple où le conteneur de grille a une hauteur de 200vh. J'ai défini la valeur align-tracks sur end .
Si align-content est normal (ce que ce sera si Je n'ai pas ajouté la propriété), alors les pistes de maçonnerie finiront au bout du conteneur.
Voir le stylo Alignement de pistes de maçonnerie de Rachel Andrew ( @rachelandrew ) sur CodePen .
align-content: start les pistes de maçonnerie reviennent au début du conteneur. Cependant, les «bords rugueux» de la disposition sont maintenant en haut plutôt qu'en bas parce que les rails de maçonnerie sont alignés à l'extrémité.
Note : Vous pouvez utiliser l'une des valeurs utilisées pour align-content pour align-tracks et justify -tracks . Il y a quelques bons exemples dans les spécifications de différentes combinaisons.
Si vous définissez align-tracks: stretch alors tous les éléments de taille automatique dans la mise en page s'étireront. L'effet de maçonnerie est conservé, mais tout ce qui a une taille définie sur cet axe ne sera pas déformé.
See the Pen Masonry align-tracks: stretch by Rachel Andrew ( @rachelandrew ) sur CodePen .
Les propriétés align-tracks et justify-tracks peuvent prendre plusieurs valeurs. Un pour chaque piste dans l'axe de la grille. Cela signifie que dans notre grille à quatre pistes, nous pourrions avoir la première piste qui s'étire, la deuxième alignée pour commencer, la troisième alignée jusqu'à la fin et la quatrième alignée au centre.
Cela ne semblait pas fonctionner au moment de l'écriture. dans Firefox.
La spécification précise que s'il y a moins de valeurs que de pistes, les pistes restantes utiliseront la valeur finale spécifiée. S'il y a plus de valeurs que de pistes, les autres seront ignorées.
Comportement de repli
L'inclusion de cette fonctionnalité dans la spécification de la grille a un avantage certain lorsqu'il s'agit de créer une disposition de secours. Comme la maçonnerie se comporte de la même manière que le placement automatique, si un navigateur ne prend pas en charge la maçonnerie, le placement automatique normal peut être utilisé à la place. Ceci est susceptible de créer des lacunes dans la mise en page comme vu dans l'exemple précédent, mais ce n'est certainement pas terrible.
Vous pouvez voir cela en action en regardant l'une des démos jusqu'à présent en utilisant un navigateur sans support pour la maçonnerie. Vous obtenez toujours une mise en page. Si vous souhaitez faire quelque chose de complètement différent, vous pouvez vérifier la prise en charge de la maçonnerie avec des requêtes de fonctionnalités. Vous pourriez peut-être faire la mise en page avec multicol pour les navigateurs non compatibles.
@supports (grid-template-rows: masonry) {
/ * code de maçonnerie ici * /
}
Si la disposition de maçonnerie est vitale, vous pouvez vérifier le support de la maçonnerie en utilisant CSS.supports et n'utiliser le script de maçonnerie JavaScript que s'il n'y a pas de support. Cela signifierait que lorsque les navigateurs implémentent la maçonnerie native, ils perdront la surcharge de la version scriptée, mais ce serait là comme un polyfill.
Problèmes d'accessibilité potentiels
Alors que la maçonnerie en CSS est passionnante, c'est encore un autre endroit où une réorganisation du contenu et une déconnexion de l'ordre des documents de l'ordre visuel peuvent se produire. Comme je l'ai noté sur un problème récent qui a été soulevé, j'estime que nous créons des possibilités de mise en page passionnantes et que nous devons ensuite dire aux gens de faire très attention à leur utilisation.
J'ai écrit à ce sujet problème dans Grille, réorganisation du contenu et accessibilité . J'espère qu'au fur et à mesure que nous avançons avec cette spécification, il y aura également des efforts renouvelés pour trouver une bonne voie à suivre en ce qui concerne le contenu par rapport à l'ordre d'affichage.
Vos commentaires sont nécessaires
nouvelle spécification, mais pour avoir une implémentation de navigateur pour la tester. Si vous avez des exemples où vous avez utilisé de la maçonnerie, pourquoi ne pas essayer de remplacer votre JavaScript par la version de grille et voir si cela fonctionne pour vous? Si vous rencontrez des problèmes ou ne pouvez pas faire quelque chose que vous avez pu faire dans votre implémentation précédente, veuillez en informer le CSSWG en soulevant un problème .
Pendant que les choses sont dans un état expérimental, c'est votre chance d'aider à influencer tout changement et de signaler tout problème. Alors faites-le, et aidez à rendre cette fonctionnalité vraiment géniale encore meilleure!
(il) Source link