모든 동적 행에서 그리드 셀을 확장하는 방법은 무엇입니까? [복제]
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