web-dev-qa-db-fra.com

Comment cibler une colonne ou une ligne spécifique dans CSS Grid Layout?

Est-il possible de sélectionner une colonne ou une ligne de grille spécifique avec CSS?

Par exemple, supposons que j’ai une disposition de grille CSS de 3 lignes par 2 colonnes: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Comment sélectionnerais-je tous les éléments de la 2e colonne? Par exemple: grid:nth-child(column:2) (juste mon idée, pas de code valide).

J'ai essayé les sélecteurs nth-child Sur les éléments div, mais cela ne me permet pas de spécifier une ligne ou une colonne lorsque les éléments sont automatiquement placés par le moteur Grid Layout.

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>
htmlcsscss3css-selectorscss-grid
30
Diode Dan

Pas possible avec CSS.

CSS cible les éléments HTML, les attributs et les valeurs d'attribut.

Les colonnes et les lignes de la grille n'ont aucun de ces "crochets".

Vous devrez cibler directement les éléments de la grille.

Vous avez écrit:

Par exemple, supposons que j’ai un modèle de grille CSS de 3 lignes par 2 colonnes: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. Comment sélectionnerais-je tous les éléments de la 2e 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>
15
Michael_B

Pour attribuer un style à une ligne arbitraire, vous pouvez utiliser un élément wrapper dont la propriété display est définie sur 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 pour toutes les implémentations, vous devez vérifier que cela fonctionne dans votre environnement cible. Vous pouvez consulter le tableau de compatibilité sur MDN ou caniuse.com pour obtenir de l’assistance pour display: contents:

17
chipit24

Si vous souhaitez styliser une ligne, le même principe s'applique. 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>
2
Domenik Reitzner

Vous ne pouvez cibler aucun élément de colonne ou de ligne, mais vous pouvez sélectionner des cellules si la grille est uniforme (même nombre de cellules dans chaque ligne). Voici quelques exemples.

1. Colonnes.

Dernière colonne dans une grille à 5 colonnes:

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

Quatrième colonne (deuxième dernière) dans une grille à 5 colonnes:

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

Première (5ème dernière) colonne de 5 colonnes:

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

2. rangées

Première ligne d'une grille de 5 colonnes (cinq premières cellules):

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

Deuxième ligne d'une grille de 5 colonnes (cellules de 6 à 10):

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

Troisième ligne d'une grille de 5 colonnes (cellules 11 à 15):

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

Dernière rangée dans une grille à 5 colonnes de 20 cellules (cellules de 16 et plus):

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