Comment puis-je styliser sélectivement des lignes et des colonnes spécifiques dans une grille CSS ?

Ciblage de colonnes ou de lignes spécifiques dans la grille CSS

Dans une disposition de grille CSS, les lignes de modèle de grille et les colonnes de modèle de grille les propriétés définissent respectivement le nombre de lignes et de colonnes. Cependant, nous devons parfois styliser des parties spécifiques d'une grille.

Ciblage des lignes

Pour styliser une ligne arbitraire, nous pouvons utiliser un élément wrapper avec son affichage défini sur contenu. Cela nous permet de styliser la ligne entière comme une seule entité, même si elle contient plusieurs cellules.

Par exemple, considérons le code suivant :

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2px;
}

.grid-item {
  border: 1px solid black;
  padding: 5px;
}

.grid-row-wrapper {
  display: contents;
}

.grid-row-wrapper > .grid-item {
  background: skyblue;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

Dans cet exemple, la classe .grid-row-wrapper est appliquée à l'élément wrapper contenant la deuxième ligne d'éléments de grille. La couleur d'arrière-plan de ces éléments est définie sur bleu ciel à l'aide de l'option .grid-row-wrapper > Sélecteur .grid-item.

Ciblage des colonnes

Le ciblage de colonnes spécifiques est un peu plus délicat. CSS Grid ne fournit pas de moyen direct de sélectionner des colonnes, mais nous pouvons utiliser une combinaison d'autres propriétés pour obtenir l'effet souhaité.

Une approche consiste à utiliser plusieurs conteneurs de grille, chacun avec son propre modèle de grille. Cela nous permet de contrôler la disposition de chaque colonne indépendamment.

Une autre approche consiste à utiliser le sélecteur nth-child() pour cibler des cellules spécifiques dans la grille. Cependant, cela peut être difficile à maintenir, surtout si la grille change de manière dynamique.

Si vous devez régulièrement cibler des colonnes ou des lignes spécifiques, il est souvent préférable d'utiliser un préprocesseur ou une bibliothèque qui fournit des sélecteurs et des fonctionnalités supplémentaires pour Grille CSS.

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!