Jak objąć komórkę siatki we wszystkich dynamicznych wierszach? [duplikować]
Załączony przykład działa poprawnie, pierwsze dziecko elementu podrzędnego .container
obejmuje wszystkie wiersze, ale problem polega na tym, że grid-row-end
wartość zależy od liczby elementów podrzędnych elementu div.container
. Czy można to zrobić bez magicznej stałej (4) i BEZ zmiany struktury HTML. Niestety użycie grid-row-end:-1
jest możliwe tylko dla jawnych siatek.
.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>
Odpowiedzi
Zadano już to pytanie Utwórz siatkę obejmującą ostatni wiersz / kolumnę - Roko C. Buljan
jeśli usuniesz
gap
właściwość i zamiast tegomargin
wyślesz na dzieci (stojąc w drugiej kolumnie i z drugiego wiersza, możesz ustawić wartość hudge, że możliwe liczby nigdy nie będą pasować lub będą co najwyżej taką samą liczbą rzeczywistych wierszy siatki - G-Cyrillus
pytanie połączone nie uwzględniało zbioru luk.
urywkowy rysunek mojego komentarza:
.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>
Edytować
Jeśli javascript jest w porządku
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>
zainspirowany https://codepen.io/gc-nomade/pen/pRYPwK