Bagaimana cara merentang sel grid di semua baris dinamis? [duplikat]

Question

Contoh terlampir berfungsi dengan baik, turunan pertama dari .containerdirentang di semua baris, tetapi masalahnya adalah grid-row-endnilainya bergantung pada jumlah turunan dari div.container. Apakah mungkin untuk melakukannya tanpa konstanta ajaib (4) dan TANPA mengubah struktur HTML. Sayangnya penggunaan grid-row-end:-1hanya mungkin untuk grid eksplisit.

    .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

Ini ditanyakan sudah Buatlah grid item span sampai baris / kolom terakhir - Roko C. Buljan

jika Anda menghapus gapproperti dan alih-alih mengirimkan marginpada anak-anak (berdiri di kolom kedua dan dari baris kedua, Anda dapat menetapkan nilai hudge bahwa nomor yang mungkin tidak akan pernah cocok atau paling banyak sama dengan jumlah baris kisi yang sebenarnya - G-Cyrillus

pertanyaan terkait tidak memperhitungkan set jeda.

potongan gambar komentar saya:

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

Edit

Jika javascript tidak masalah bagi Anda

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>

terinspirasi dari https://codepen.io/gc-nomade/pen/pRYPwK