모든 동적 행에서 그리드 셀을 확장하는 방법은 무엇입니까? [복제]

Dec 01 2020

첨부 된 예제는 제대로 작동하고의 첫 번째 자식이 .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>

답변

G-Cyrillus Dec 01 2020 at 13:35

이것은 이미 질문되었습니다 그리드 항목을 마지막 행 / 열까지 확장 -Roko C. Buljan

gap속성 을 제거 하고 대신 margin자식을 디스패치 하는 경우 (두 번째 열과 두 번째 행에 서있는 경우 가능한 숫자가 절대 일치하지 않거나 그리드의 실제 행과 최대 동일한 양이되도록 hudge 값을 설정할 수 있습니다. – 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>

편집하다

자바 스크립트가 괜찮다면

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