Accentsconagua
Share
Dans l'un de nos précédents didacticiels d'introduction à CSS Grid, nous avons examiné les colonnes fluides et les meilleures gouttières. Nous avons appris qu'il n'est pas nécessaire de spécifier exactement où nous voulons positionner nos éléments de la grille; si nous déclarons les propriétés de notre grille, celle-ci positionnera nos éléments en fonction de son algorithme de placement automatique.
Dans ce tutoriel, nous verrons comment cet algorithme fonctionne et comment nous pouvons l’influencer..
Si votre navigateur n'est pas configuré pour prendre en charge Grid, vous devrez résoudre ce problème. Lis ça:
Voici une grille de démonstration pour lancer des choses; c'est un conteneur que nous avons déclaré être affichage: grille; et détient dix-huit éléments enfants. Nous avons dit qu'il devrait avoir cinq colonnes, chacune de largeur égale, au moins le même nombre de lignes et une gouttière étroite tout autour de 2 pixels..
Grille-modèle-colonnes: répéter (5, 1fr); grid-template-rows: repeat (5, 1fr); intervalle de grille: 2px;
Jusqu'ici tout va bien, et vous pouvez voir que Grid a pris nos dix-huit articles et les a insérés, en partant du haut à gauche, en se déplaçant vers la droite, puis en descendant, rangée par rangée. Ce comportement est très semblable au fonctionnement des flotteurs.
Remarque: le comportement de gauche à droite serait inversé si nous avions affaire à un direction: RTL; disposition.
Tout cela est beau et net, mais voyons ce qui se passe lorsque nos articles ne vont pas si bien. À .point 7 nous ajouterons quelques règles pour l'agrandir en couvrant deux colonnes et deux lignes:
.item-7 background: # e03f3f; grille-colonne: envergure 2; rangée de la grille: portée 2;
Comment ça ressemble maintenant?
Pas mal! .point 7 remplit plus d'espace, donc .point 8 et .article-9 sont positionnés plus loin sur. .point 10 puis regarde pour voir s'il y a un espace vacant à côté de .article-9, et quand il voit il n'y a pas ça bouge vers le bas une rangée et recommence à l'extrême gauche. Les autres articles continuent à rentrer de la même manière.
Mais attendez, si nous faisons aussi .article-9 un peu en surpoids?
Maintenant ça devient intéressant; .article-9 ne rentre plus dans la colonne à la fin, elle est donc poussée à la rangée suivante. Comme il ne peut pas aller dans autre chose .point 7 ça reste en place. .point 10, vous pourriez imaginer, se glisserait en dessous .article-6 encore une fois, mais, si vous vous en souvenez, il cherche une colonne vide, puis il se déplace en bas d'une rangée et shunts à nouveau à gauche. C’est un concept important à saisir.
Si vous regardez la démo précédente, vous verrez que .article-18, en ne trouvant pas d’espace à côté de .point 17, a descendu une rangée. En fait, nous n’avons défini que cinq lignes, mais Grid a supposé que nous voudrions une autre ligne. Ceci est dû à écoulement automatique, qui appartient à l'élément de grille et dont la valeur par défaut est rangée. Nous pouvons changer cette valeur en colonne si nous voulons, cela changerait totalement l'apparence de notre réseau:
Cela ressemble sorte de similaire, mais vous remarquerez que nos éléments ont été insérés en haut à gauche, puis déplacés vers le bas pour remplir chaque ligne, puis déplacés dans la deuxième colonne, etc. Alors maintenant, lorsqu'un élément est trop grand pour ses bottes, l'élément suivant recherche la prochaine ligne vide, puis échoue pour passer à la colonne suivante..
Nous pouvons ajouter un autre mot clé à notre écoulement automatique propriété, et c’est peut-être mon mot-clé CSS préféré à ce jour: dense. Sa contrepartie par défaut est clairsemé (mon deuxième favori). Faisons ce qui suit:
grid-auto-flow: ligne dense;
Remarque: nous n'avons pas besoin d'inclure rangée ici, c'est implicite, mais cela met en évidence le fonctionnement de la syntaxe.
Maintenant notre ami .point 10, en constatant qu'il n'y a pas d'espace à côté de .article-9, vérifie d'abord ce qui est au dessus de avant de passer à une autre rangée.
Grâce à ce changement d'algorithme de placement, nos articles sont maintenant très chargés, ce qui nous permet de remplir plus efficacement la grille. Cela signifie toutefois que la présentation visuelle ne reflète pas nécessairement l'ordre des sources du document, ce qui peut ne pas toujours être utile pour l'utilisateur..
Résumons:
écoulement automatique de rangée à colonne.écoulement automatique accepte un mot-clé pour décrire l'approche «d'emballage». Par défaut cette valeur est clairsemé, mais nous pouvons modifier cela pour dense qui tente de combler toutes les lacunes disponibles.