Un guide de l'algorithme de placement automatique dans la grille CSS

Ce tutoriel détaille l'algorithme de placement automatique du module de mise en page CSS, qui positionne les éléments basés sur la propriété grid-auto-flow. Les articles précédents couvraient les bases de la grille CSS, mais celle-ci se concentre sur l'algorithme lui-même, expliquant comment les éléments se retrouvent dans leurs positions finales.

Concepts clés:

• L'algorithme de placement automatique, régi par grid-auto-flow (défautant vers row), positionne les éléments de la grille.
• Il gère les éléments de grille anonymes (texte non style directement dans le conteneur de la grille).
• Les éléments explicitement positionnés (en utilisant grid-area) sont placés en premier.
• Éléments avec des positions de ligne définies mais les positions des colonnes non définies sont placées ensuite, en utilisant des emballages clairsemés (par défaut) ou denses.
• L'algorithme détermine le nombre de colonnes de la grille implicite, se développant au besoin pour accueillir des éléments avec des positions de colonne spécifiques ou de grandes portées.
• Enfin, les éléments restants sont positionnés en fonction de grid-auto-flow, en utilisant un curseur de placement automatique qui commence au niveau supérieur à gauche de la grille implicite.

Comprendre l'algorithme:

Avant de plonger, comprenez ces concepts de base:

• Éléments de grille anonymes: Le texte dans le conteneur de la grille, non enveloppé dans des balises, devient un élément de grille anonyme. Il ne peut pas être stylé directement mais hérite des styles de parents. Whitespace ne crée pas d'articles anonymes.
• Cridine de la grille: Sauf si spécifiée, la grille s'étend par défaut à 1 (une cellule).
• Grille implicite: La grille définie par grid-template-rows, grid-template-columns, et grid-template-areas est la grille explicite. La grille implicite s'étend au-delà de cela pour accueillir les articles placés à l'extérieur de ses limites.

L'explication suivante suppose grid-auto-flow: row. Pour grid-auto-flow: column, échangez "Row" et "Colonne" dans les descriptions.

Étape 1: Génération anonyme de la grille:

L'algorithme commence par créer des éléments de grille anonymes à partir de n'importe quel texte directement dans le conteneur de la grille. Ce sont des styles de parent non stytyables mais hérités.

Étape 2: Placer des éléments positionnés explicitement:

Les éléments avec des positions définis explicitement à l'aide de grid-area sont placés en premier. L'algorithme utilise les valeurs grid-area (la ligne de démarrage, la colonne de démarrage, la ligne de fin, la colonne de fin) pour déterminer leur emplacement.

Étape 3: Placement des éléments avec une ligne de réglage, des positions de colonne non définies:

Ensuite, des éléments avec des positions spécifiées grid-row-start et grid-row-end (mais pas des positions de colonne) sont placées. L'algorithme utilise un emballage clairsemé ou dense:

• Emballage clairsemé (par défaut): L'élément est placé dans la plus ancienne colonne disponible sans chevaucher les éléments existants. Il ne considère que les éléments placés à cette étape , pas des étapes antérieures.

• Emballage dense (grid-auto-flow: row dense): L'élément est placé dans la première colonne disponible, même si cela signifie le placer avant d'autres éléments dans la même ligne qui ont été placés dans cette étape.

(clairsemé) (dense)

Étape 4: Déterminer le nombre implicite de colonne de grille:

L'algorithme détermine le nombre de colonnes de la grille implicite:

1. commence par le nombre de colonnes de la grille explicite.
2. ajoute des colonnes pour accueillir des éléments avec des positions de colonne définies.
3. Ajoute des colonnes si la plus grande portée de colonne parmi les éléments restants dépasse la largeur de la grille implicite actuelle.

Étape 5: Placer les éléments restants:

Le curseur de placement automatique (initialement en haut à gauche) est utilisé pour positionner les éléments restants. Le mode d'emballage (clairsemé ou dense) affecte le placement:

• Emballage clairsemé: Le curseur se déplace à travers les colonnes jusqu'à ce qu'une position non chevauchante soit trouvée. Si aucun espace n'est trouvé dans la ligne actuelle, il se déplace vers la ligne suivante.

• Emballage dense: Le curseur se réinitialise au haut à gauche de la grille implicite pour chaque élément, trouvant la première position non chevauchante disponible.

(clairsemé) (dense)

Conclusion:

Cette procédure détaillée clarifie l'algorithme de placement automatique de la grille CSS. Expérimentez avec différentes dispositions pour solidifier votre compréhension. La section FAQS du texte d'origine a été omise par concision, car l'explication de l'algorithme de base est déjà assez complète.

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!