Wie überspanne ich eine Gitterzelle über alle dynamischen Zeilen? [Duplikat]

Dec 01 2020

Das angehängte Beispiel funktioniert ordnungsgemäß. Das erste untergeordnete .containerElement von wird über alle Zeilen verteilt. Das Problem besteht jedoch darin, dass der grid-row-endWert von einer Anzahl von untergeordneten Elementen von abhängt div.container. Ist es möglich, dies ohne die magische Konstante (4) und OHNE Änderung einer HTML-Struktur zu tun? Leider ist die Verwendung grid-row-end:-1nur für die expliziten Gitter möglich.

    .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>

Antworten

G-Cyrillus Dec 01 2020 at 13:35

Dies wurde bereits gefragt. Erstellen Sie eine Rasterelementspanne bis zur letzten Zeile / Spalte - Roko C. Buljan

Wenn Sie die gapEigenschaft entfernen und stattdessen margindie untergeordneten Elemente versenden (in der zweiten Spalte und in der zweiten Zeile), können Sie einen Hudge-Wert festlegen, bei dem die möglichen Zahlen niemals übereinstimmen oder höchstens die gleiche Anzahl der tatsächlichen Zeilen des Rasters aufweisen - G-Cyrillus

Die verknüpfte Frage berücksichtigte nicht die festgelegte Lücke.

Snippet Zeichnung von meinem Kommentar:

.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>

Bearbeiten

Wenn Javascript für Sie in Ordnung ist

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>

inspiriert von https://codepen.io/gc-nomade/pen/pRYPwK