Les éléments de grille peuvent-ils s'étendre jusqu'à la dernière cellule dans les grilles CSS implicites ?

Les éléments de grille peuvent-ils s'étendre jusqu'à la dernière cellule de la grille dans les grilles implicites ?

Les dispositions de grille sont couramment utilisées pour organiser le contenu en lignes et en colonnes. Dans certains scénarios, il peut être souhaitable qu'un élément s'étende sur plusieurs lignes ou colonnes, quel que soit le nombre de lignes ou de colonnes dans la grille. Cependant, cela peut poser un défi lors de l'utilisation de grilles implicites, où le nombre de lignes et de colonnes n'est pas explicitement défini.

Dans l'exemple fourni, un conteneur contient un nombre dynamique de cases disposées dans une grille implicite. La tâche consiste à faire en sorte que la troisième boîte s'étende de la première ligne de grille à la dernière. Bien qu'il puisse sembler qu'une simple solution de grille devrait suffire, la spécification CSS Grid Niveau 1 ne prend actuellement pas en charge une telle solution.

Cependant, une solution de contournement utilisant le positionnement absolu est suggérée dans une autre référence.

Résoudre le problème dans les grilles explicites

Bien que l'extension à travers les cellules ne soit pas possible dans les grilles implicites, cela peut être obtenu dans des grilles explicites, où le nombre exact de lignes et de colonnes est défini à l'aide de propriétés telles que grille-modèle-lignes, grille-modèle-colonnes et grille-modèle-zones.

Selon la spécification CSS Grid , des entiers négatifs peuvent être utilisés pour compter à partir du bord final d'une grille explicite. En utilisant cette fonctionnalité, nous pouvons obtenir le comportement souhaité :

grid-column: 3 / -1;

Cette syntaxe s'étendra sur la zone de la grille de la troisième ligne de colonne à la dernière ligne de colonne. De même, ce qui suit s'étendrait de la première ligne de colonne à la troisième ligne de colonne :

grid-column: 1 / -3;

Il est important de noter que cette approche ne s'applique qu'aux grilles explicites, où le nombre spécifique de lignes et de colonnes est défini.

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!