Comment puis-je faire en sorte que les éléments de la grille s'étendent jusqu'à la dernière ligne/colonne dans la grille CSS ?

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

Dans CSS Grid, il est possible de faire en sorte que les éléments de la grille s'étendent jusqu'à la dernière ligne/colonne dans des grilles explicites utilisant des entiers négatifs. Cependant, cette technique ne fonctionne pas pour les grilles implicites.

Grilles implicites

Les grilles implicites n'ont pas un nombre fixe de lignes et de colonnes, ce n'est donc pas possible pour spécifier directement une étendue jusqu'à la dernière ligne/colonne. Par exemple, considérons la grille suivante avec un nombre inconnu de lignes :

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

Spanning dans des grilles implicites

Pour qu'un élément s'étende du premier au dernier ligne dans une grille implicite, vous pouvez utiliser le positionnement absolu. Dans cet exemple, nous plaçons la troisième case au-dessus des autres cases, puis la décalons vers le bas pour qu'elle apparaisse s'étendre sur les lignes :

.box:nth-child(3) {
  background-color: yellow;
  position: relative;
  top: calc(-100vh + 20px);
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

Grilles explicites

Dans les grilles explicites, où les lignes et les colonnes sont explicitement définies, vous pouvez utiliser des entiers négatifs pour s'étendre jusqu'à la dernière ligne/colonne. Ceci est illustré ci-dessous :

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}

.item {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

Dans cet exemple, l'élément .item s'étendra sur toute la deuxième colonne et la deuxième ligne de la grille.

Conclusion

Bien que CSS Grid n'offre pas de moyen direct d'atteindre la dernière ligne/colonne dans les grilles implicites, vous pouvez y parvenir avec un positionnement absolu. Dans les grilles explicites, cependant, vous pouvez utiliser des entiers négatifs à cet effet.

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!