Comment étendre une cellule de grille sur toutes les lignes dynamiques? [dupliquer]

Question

L'exemple joint fonctionne correctement, le premier enfant de .containerest réparti sur toutes les lignes, mais le problème est que la grid-row-endvaleur dépend d'un certain nombre d'enfants de div.container. Est-il possible de le faire sans la constante magique (4) et SANS changer une structure HTML. Malheureusement, l'utilisation grid-row-end:-1n'est possible que pour les grilles explicites.

    .container {
        display:grid;
        grid-gap: 0.4em;
    }
    .container > * {
        background-color: lightgray;
    }
    .container *:first-child {
        grid-column: 1;
        grid-row-start: 1;
        grid-row-end: 4;
    }
    .container *:not(:first-child) {
        grid-column: 2;
    }
 

<div class="container">
    <div>IMG</div>
    <div>A</div>
    <div>B</div>
    <div>...</div>
</div>

Answer 1

Cela a déjà été demandé Faire un élément de la grille s'étendre à la dernière ligne / colonne - Roko C. Buljan

si vous supprimez la gappropriété et distribuez marginà la place sur les enfants (debout dans la deuxième colonne et à partir de la deuxième ligne, vous pouvez définir une valeur hudge que les nombres possibles ne correspondront jamais ou seront au plus le même nombre de lignes réelles de la grille - G-Cyrillus

la question liée ne tenait pas compte de l'ensemble des écarts.

extrait de code dessin de mon commentaire:

.container {
        display:grid;  
    }
    .container > * {
        background-color: lightgray;
    }
    .container *:first-child {
        grid-column: 1;
        grid-row-start: 1;
        grid-row-end: 100;/* use a value that will over the expected numbers of row */
        grid-gap:0; /* empty rows will collapse to none height */
        grid-auto-rows:auto; /* do not give an height here , else empty rows will use space */
        margin-right:0.2em;
    }
    .container :nth-child(2)   {
        margin-left:0.2em;
        grid-column:2;
    }
    .container :nth-child(2) ~ div  {
        grid-column:2;
        margin-top:0.4em;
        margin-left:0.2em;
    }

<div class="container">
    <div>IMG</div>
    <div>A</div>
    <div>B</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Éditer

Si javascript vous convient

let rowsToSpan = document.querySelectorAll(".container>*");
rowsToSpan[0].style.gridRowEnd = rowsToSpan.length

.container {
  display: grid;
  grid-gap: 0.4em;
}

.container>* {
  background-color: lightgray;
}

.container *:first-child {
  grid-column: 1;
  grid-row-start: 1;
  /*grid-row-end: 4;*/
}

.container *:not(:first-child) {
  grid-column: 2;
}

<div class="container">
  <div>IMG</div>
  <div>A</div>
  <div>B</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

inspiré de https://codepen.io/gc-nomade/pen/pRYPwK