Como abranger uma célula de grade em todas as linhas dinâmicas? [duplicado]
O exemplo anexado funciona corretamente, o primeiro filho de .container
é distribuído por todas as linhas, mas o problema é que o grid-row-end
valor 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:-1
só é 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
Isso já foi solicitado Faça um item de grade se estender até a última linha / coluna - Roko C. Buljan
se você remover a
gap
propriedade e, em vez disso, enviarmargin
para 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