Wie überspanne ich eine Gitterzelle über alle dynamischen Zeilen? [Duplikat]
Das angehängte Beispiel funktioniert ordnungsgemäß. Das erste untergeordnete .container
Element von wird über alle Zeilen verteilt. Das Problem besteht jedoch darin, dass der grid-row-end
Wert 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:-1
nur 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
Dies wurde bereits gefragt. Erstellen Sie eine Rasterelementspanne bis zur letzten Zeile / Spalte - Roko C. Buljan
Wenn Sie die
gap
Eigenschaft entfernen und stattdessenmargin
die 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