La grille CSS peut-elle s'étendre sur un élément de grille jusqu'à la dernière ligne/colonne d'une grille implicite ?

Créer un élément de grille s'étendant jusqu'à la dernière ligne/colonne dans la grille implicite

Introduction

Dans une grille implicite, où le nombre de lignes et colonnes n'est pas explicitement défini, il peut être difficile d'étendre un élément de grille jusqu'à la dernière ligne ou colonne sans connaître leur nombre exact. Cette question explore la possibilité d'y parvenir avec CSS Grid.

Est-ce possible ?

Dans sa version actuelle, CSS Grid ne peut pas directement s'étendre sur un élément de grille depuis le premier à la dernière ligne/colonne d’une grille implicite. Bien que des entiers négatifs puissent être utilisés pour compter à partir du bord final dans des grilles explicites, cette approche n'est pas applicable dans ce scénario.

Solution alternative utilisant le positionnement absolu

Alors que les limitations de la grille empêchent de s'étendre jusqu'au dernier ligne/colonne, le positionnement absolu offre une solution de contournement potentielle. En plaçant l'élément absolument à l'intérieur du conteneur, il peut être positionné et étiré pour remplir l'espace jusqu'à la fin de la grille implicite.

Exemple d'utilisation du positionnement absolu

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  height: 200px;
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: yellow;
}

<div class="container">
  <div class="item">Item</div>
  ... other grid items
</div>

Dans dans cet exemple, le .item est positionné de manière absolue et étiré pour remplir toute la hauteur du conteneur, créant l'illusion de s'étendre jusqu'au dernier row.

Conclusion

Bien que les limitations de la grille CSS ne permettent pas de s'étendre directement à la dernière ligne/colonne dans les grilles implicites, des techniques alternatives telles que le positionnement absolu peuvent être utilisées pour obtenir un effet similaire.

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!