Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Comprendre « l'algorithme auto-placement » de CSS Grid

by
Read Time:4 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Going Responsive With auto-fill and minmax()
Quick Tip: Name Your CSS Grid Lines, Just in Case

French (Français) translation by Henri Lotin (you can also view the original English article)

Dans l’un de nos précédents tutoriels d'introduction à CSS Grid nous avons regardé aux colonnes fluides et meilleures gouttières. Nous avons appris que ce n’est pas nécessaire de spécifier exactement où l'on veut placer nos éléments de grille ; Si nous déclarons les propriétés de la grille, Grid emboitera nos éléments selon son algorithme auto-placement.

Dans ce tutoriel, nous allons jeter un regard sur comment cet algorithme fonctionne et comment nous pouvons l’influencer.

Mise en place

Si votre navigateur n’est pas configuré pour prendre en charge Grid, vous devrez le régler pour qu'il suive. Lisez ceci :

  • CSS Grid Layout: A Quick Start Guide

Cela a commencé avec une grille

Voici une grille de démo pour démarrer les choses ; C’est un conteneur qui nous avons déclaré d'être display: grid; et contient dix-huit éléments enfants. Nous avons dit qu’elle devrait avoir cinq colonnes, chacune d’égale largeur, au moins le même nombre de lignes et une gouttière étroite aux alentours de 2px.

Tout va bien pour l'instant, et vous pouvez voir que Grid a pris nos dix-huit éléments et les a intégrés, travaillant à partir du haut à gauche, se déplaçant à travers vers la droite, puis déplacer vers le bas ligne par ligne. Ce comportement ressemble beaucoup à la manière dont float fonctionne.

Remarque : le comportement de gauche à droite s’inverserait si nous avions affaire à une mise en pages direction: RTL;.

Jeter une clé dans l'œuvre

C’est tout beau et propre, mais nous allons voir ce qui se passe lorsque nos éléments ne conviennent si parfaitement. À .Item-7, nous allons ajouter quelques règles afin de le rendre plus grand en l’étendant sur deux lignes et deux colonnes :

À cela ressemble maintenant ?

Pas trop mal ! .Item-7 remplit plus d’espace, donc .item-8 et .item-9 sont positionnés un peu plus loin. .Item-10 se penche alors pour voir s’il y a un espace vacant à côté de .item-9, et quand il voit qu'il n’existe pas, il descend d’une ligne et recommence à l’extrême gauche. Les autres éléments continuent de rentrer de la même manière.

Mais attendez, que se passe-t-il si nous faisons aussi .item-9 un peu d’embonpoint ?

Maintenant, ça devient intéressant ; .item-9 ne suffit plus dans la colonne à la fin donc il est poussé vers le bas à la ligne suivante. Comme il ne tiennent pas dans quoi que ce soit au-delà .item-7 il reste en place. .Item-10, vous pouvez l’imaginer, se serait lui-même balancé en-dessous de .item-6 encore une fois, mais, si vous vous souvenez, il cherche une colonne vacante, puis à défaut il descend d’une ligne et se faufile vers la gauche à nouveau. Il s’agit d’un concept important à saisir.

Dites « Bonjour » à grid-auto-flow

Si vous regardez la démo précédente, vous verrez que .item-18, à défaut de se trouver à côté de .item-17, est descendu d’une ligne. Nous avons défini uniquement en fait cinq rangées, mais Grid a supposé que nous aurons​ besoin d'une autre ligne. Cela est dû à la grid-auto-flow, qui appartient à l’élément de grille, et dont la valeur par défaut est row. Nous pouvons changer cette valeur pour column si nous voulons, ce qui modifierait totalement l’apparence de notre grille :

Cela est en quelque sorte similaire, mais vous remarquerez que nos éléments ont glissé en haut à gauche, puis se sont déplacé vers le bas pour remplir la ligne, puis ont traversé à la deuxième colonne et ainsi de suite. Alors maintenant, lorsqu’un élément est trop grand pour ses bottes, l'élément suivant recherche le prochain espace vacant de ligne, puis à défaut se déplace au-dessus de la colonne suivante.

Dense fait sens

Nous pouvons ajouter un autre mot clé à notre propriété grid-auto-flow, et c’est peut-être mon mot-clé CSS préféré à ce jour : dense. Son homologue par défaut est sparse (mon deuxième préféré). Nous allons faire ce qui suit :

Remarque : nous n’avons pas besoin d’inclure row ici, il est implicite, mais cela met en évidence comment fonctionne la syntaxe.

Maintenant notre ami .item-10, a compris qu’il n’y a pas d’espace à côté de .item-9, vérifie d’abord ce qu'il y a au-dessus avant de passer à une autre ligne.

Grâce à ce changement dans l’algorithme de placement nos éléments sont maintenant densément classés, ce qui nous donne une grille plus efficacement remplie. Toutefois, cela ne signifie pas que la disposition visuelle ne reflète pas nécessairement l’ordre du document source, qui ne peut toujours pas être utile à l’utilisateur.

Conclusion

Récapitulons :

  1. Si nous n’avons pas spécifiquement défini l'emplacement de l’élément, l'algorithme auto-placement de Grid le placera dans l’emplacement disponible (et assez grand) suivant.
  2. Lorsqu’il n’y a aucun emplacement disponible dans la ligne actuelle, il va commencer la recherche de la ligne suivante, même s’il reste des vides.
  3. Nous pouvons changer cet ordre de recherche en altérant grid-auto-flow de row à column.
  4. grid-auto-flow accepte un mot clé pour décrire l’approche « d’emballage ». Par défaut, cette valeur est sparse, mais nous pouvons modifier ça pour dense qui tente de combler tous les vides disponibles.

Ressources utiles

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.