Jak objąć komórkę siatki we wszystkich dynamicznych wierszach? [duplikować]

Dec 01 2020

Załączony przykład działa poprawnie, pierwsze dziecko elementu podrzędnego .containerobejmuje wszystkie wiersze, ale problem polega na tym, że grid-row-endwartość 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:-1jest 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

G-Cyrillus Dec 01 2020 at 13:35

Zadano już to pytanie Utwórz siatkę obejmującą ostatni wiersz / kolumnę - Roko C. Buljan

jeśli usuniesz gapwłaściwość i zamiast tego marginwyś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