Comment cibler une colonne ou une ligne spécifique dans la disposition de grille CSS?

Question

Est-il possible de choisir une grille de colonne ou de ligne avec CSS?

Par exemple, dire que j'ai un 3 rangées de 2 colonne de Grille CSS de Mise en page: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Comment puis-je sélectionner tous les éléments de la 2ème colonne? Par exemple: grid:nth-child(column:2) (juste mon idée, pas de code valide).

J'ai essayé nth-child sélecteurs sur l' div éléments, mais cela ne me permet pas de spécifier de ligne ou de colonne lorsque les éléments sont placés automatiquement par la Grille de Mise en page du moteur.

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background: #999;
}

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Right Justify</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

Answer 1

De style arbitraire en ligne, vous pouvez utiliser un wrapper élément avec ses display ensemble de contents. Voir l'extrait de code ci-dessous:

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

EDIT: Comme avec toutes les implémentations, vous devriez vérifier pour s'assurer qu'il fonctionne dans l'environnement cible(s). Vous pouvez consulter le tableau de compatibilité sur MDN ou caniuse.com pour le soutien des display: contents:

• https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility
• https://caniuse.com/#search=display%3A%20contents

Answer 2

Pas possible avec les CSS.

CSS cibles HTML des éléments, des attributs et des valeurs d'attribut.

Grille de colonnes et de lignes n'ont aucun de ces "crochets".

Vous aurez à cibler les éléments de la grille directement.

Vous avez écrit:

Par exemple, dire que j'ai un 3 rangées de 2 colonne de Grille CSS de Mise en page: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Comment puis-je sélectionner tous les éléments de la 2ème colonne?

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(2n) {
  border: 2px dashed red;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

Answer 3

Il n'y a pas de colonne ou de la rangée d'éléments que vous pouvez cibler mais si la grille est uniforme (même nombre de cellules dans chaque ligne) vous pouvez sélectionner des cellules. Voici quelques exemples.

1. Les colonnes.

La dernière colonne 5 colonne de la grille:

    .item:nth-child(5n) { /* ... */ }

Quatrième (2ème et dernière) colonne 5 colonne de la grille:

    .item:nth-child(5n-1) { /* ... */ }

La première (5ème et dernière) colonne 5 colonne de la grille:

    .item:nth-child(5n-4) { /* ... */ }

2. Les lignes

Première ligne 5 colonne de la grille (cinq premières cellules):

    .item:nth-child(-n+5) { /* ... */ }

La deuxième rangée dans un 5-grille de colonne (cellules de 6 à 10):

    .item:nth-child(n+6):nth-child(-n+10) { /* ... */ }

Troisième rangée dans un 5-grille de colonne (cellules de 11 à 15 ans):

    .item:nth-child(n+11):nth-child(-n+15) { /* ... */ }

Dernière ligne 5 colonne de la grille avec 20 cellules (cellules de 16 sa):

    .item:nth-child(n+16) { /* ... */ }

Answer 4

Si jamais vous souhaitez styliser une ligne, le même principe s'applique. En prenant cet exemple d'en haut:

 grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(4n+3),grid-item:nth-child(4n) {
  border: 2px dashed red;
} 

 <grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container> 

Answer 5

CSS Grid exclut le concept d'une ligne par conception, vous devez donc ajouter explicitement cette relation sémantique au balisage.

Si vous contrôlez la création de la liste, vous pouvez ajouter une propriété even ou odd par exemple (dans le générateur JSX pour illustration / simplicité):

 for (const rowIndex in items) {
  const row = items[rowIndex]
  const parity = {[rowIndex % 2 ? 'odd' : 'even']: ''}
  for (const col in row.columns) {
     yield <div class='col' {...parity}>{col}</div>
  }
}
 

Qui produira quelque chose comme:

 <div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
 

Puis dans votre CSS:

 .col[even] { ... }
.col[odd] { ... }