Como abranger uma célula de grade em todas as linhas dinâmicas? [duplicado]

Dec 01 2020

O exemplo anexado funciona corretamente, o primeiro filho de .containeré distribuído por todas as linhas, mas o problema é que o grid-row-endvalor depende de vários filhos de div.container. É possível fazer isso sem a constante mágica (4) e SEM alterar uma estrutura HTML. Infelizmente, o uso grid-row-end:-1só é possível para as grades 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>

Respostas

G-Cyrillus Dec 01 2020 at 13:35

Isso já foi solicitado Faça um item de grade se estender até a última linha / coluna - Roko C. Buljan

se você remover a gappropriedade e, em vez disso, enviar marginpara os filhos (estando na segunda coluna e na segunda linha, você pode definir um valor de hudge que os números possíveis nunca corresponderão ou serão no máximo a mesma quantidade de linhas reais da grade - G-Cyrillus

a questão vinculada não levou em consideração o gap definido.

desenho de fragmento do meu comentário:

.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

Se javascript está bom para você

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