¿Cómo abarcar una celda de la cuadrícula en todas las filas dinámicas? [duplicar]

Question

El ejemplo adjunto funciona correctamente, el primer hijo de .containerse distribuye en todas las filas, pero el problema es que el grid-row-endvalor depende de varios hijos de div.container. ¿Es posible hacerlo sin la constante mágica (4) y SIN cambiar una estructura HTML? Desafortunadamente, el uso grid-row-end:-1solo es posible para las cuadrículas explícitas.

    .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

Esto ya se pidió Hacer un elemento de cuadrícula que abarque la última fila / columna - Roko C. Buljan

si quita la gappropiedad y, en cambio, envía margina los niños (de pie en la segunda columna y desde la segunda fila, puede establecer un valor de agrupación que los números posibles nunca coincidirán o serán como máximo la misma cantidad de filas reales de la cuadrícula - G-Cyrillus

la pregunta vinculada no tuvo en cuenta la brecha establecida.

dibujo de fragmento de mi comentario:

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

Editar

Si javascript está bien para usted

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>

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