グリッドセルをすべての動的行にまたがる方法は？[複製]

Question

添付の例は正しく機能し、の最初の子は.containerすべての行にまたがっていますが、問題は、grid-row-end値がの子の数に依存していることですdiv.container。マジック定数（4）なしで、HTML構造を変更せずにそれを行うことは可能ですか？残念ながら、使用grid-row-end:-1は明示的なグリッドに対してのみ可能です。

    .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

これはすでに尋ねられましたグリッドアイテムを最後の行/列にスパンさせる -RokoC。Buljan

gapプロパティを削除し、代わりmarginに子にディスパッチする場合（2番目の列と2番目の行に立っている場合、可能な数が決して一致しないか、グリッドの実際の行の最大数と同じになるハッジ値を設定できます– G-Cyrillus

リンクされた質問は、ギャップセットを考慮していませんでした。

私のコメントのスニペット描画：

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

編集

javascriptで大丈夫なら

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>

からインスピレーション https://codepen.io/gc-nomade/pen/pRYPwK