web-dev-qa-db-fra.com

Éléments qui s'étendent sur toutes les colonnes / lignes à l'aide de la disposition de grille CSS

Avec le module CSS Grid Layout bientôt disponible dans Firefox et Chrome, j'ai pensé que j'essaierais de comprendre comment l'utiliser.

J'ai essayé de créer une grille simple avec un élément a couvrant le côté gauche de toutes les lignes, avec les autres éléments (b, c, d, e, etc.) couvrant le côté droit de chaque ligne. La quantité d'éléments couvrant le côté droit des lignes est variable, il peut donc y avoir n'importe quelle combinaison de b, c, d, e, etc. ., donc j'utilise le grid-auto-rows propriété. En tant que tel, je ne peux pas définir un nombre fixe de lignes pour que a s'étende, mais j'aimerais que a s'étende toutes les lignes disponibles.

#container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-template-columns: [left] 4rem [right] 1fr;
    margin: 0rem auto;
    max-width: 32rem;
}
#a {
    background: lightgreen;
    grid-column: left;
    grid-row: 1 / auto;
    justify-self: center;
}
#b {
    grid-area: auto / right;
    background: yellow;
}
#c {
    grid-area: auto / right;
    background: pink;
}
#d {
    grid-area: auto / right;
    background: lightskyblue;
}
#e {
    background: Plum;
    grid-area: auto / right;
}
<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
</div>

Que dois-je faire pour que a couvre toutes les lignes sans savoir combien de lignes il y aura?

htmlcssgridcss-grid
21
Marlius

J'ai eu la même situation et j'ai trouvé une solution propre.

Au lieu d'utiliser une énorme valeur de portée de ligne, essayez:

    grid-column: 1/-1;

Comme un nombre négatif compte à partir de la droite, ce code spécifie la grille-colonne jusqu'à la fin de la dernière colonne.

51
Harry Le

Vous pouvez utiliser une valeur de hudge de ligne pour couvrir (au moins autant que vous pensez que le nombre maximal de lignes pourrait être) :

#container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  justify-self: center;/* ? what did you mean here ? */
  /* did you mean : */
  display:flex;
  align-items:center;
}
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: Plum;
  grid-area: auto / right;
}
<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

ou vouliez-vous dire:

#container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  align-self: center;
  justify-self:center
  }
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: Plum;
  grid-area: auto / right;
}
<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

Voici n codepen pour jouer avec live .

2
G-Cyr