Comment puis-je styliser sélectivement des lignes et des colonnes spécifiques dans les mises en page de grille CSS ?

Style ciblé pour les mises en page de grille CSS : lignes et colonnes

Dans les mises en page de grille CSS, il devient essentiel de cibler sélectivement des lignes ou des colonnes spécifiques pour style précis. Bien que les sélecteurs de nième enfant puissent être utilisés pour la sélection d'éléments traditionnelle, ils ne parviennent pas à cibler des éléments au sein de la structure de la grille.

Ciblage des lignes

Pour résoudre ce problème limitation, envisagez d’utiliser un élément wrapper avec sa propriété d’affichage définie sur contents. Cette technique vous permet d'attribuer des styles spécifiquement aux enfants du wrapper, même s'ils sont positionnés dans les pistes de la grille.

Par exemple, l'extrait de code ci-dessous montre comment mettre en surbrillance une ligne spécifique en bleu :

.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;
}

Dans cet exemple, l'élément wrapper ".grid-row-wrapper" a sa propriété d'affichage définie sur contents, permettant à ses enfants directs ".grid-item" d'hériter de son couleur de fond bleue, créant l'effet souhaité.

Ciblage des colonnes

Bien que la technique ci-dessus soit efficace pour les lignes, CSS Grid Layout ne dispose pas d'un mécanisme équivalent pour cibler directement des colonnes spécifiques . Cependant, une solution de repli consiste à ajuster la position des éléments dans la grille à l'aide des propriétés justification-self ou align-self, ce qui peut créer l'illusion de cibler des colonnes spécifiques.

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!