by Anonymous » 21 Aug 2025, 03:44
Ich arbeite an einer Benutzeroberfläche mit vielen blockigen Elementen unterschiedlicher Breiten.
Ich möchte kleinere Blöcke nach oben und größere Blöcke näher am Boden. Wenn möglich, möchte ich Lücken zwischen Blöcken vermeiden. Das folgende repräsentative Beispiel zeigt jedoch ein Szenario, das ich festgestellt habe, in dem noch ein Lücken auftreten kann. In Ihrer Antwort erhalten Sie in Ihrer Antwort bitte die Styles für die Gitterspalte und behalten Sie die Sortierung des inneren Divs.
Code: Select all
.grid {
background-color: grey;
min-height: 100px;
margin-bottom: 10px;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}< /code>
Example #1 - Given HTML (notice gap between pink/red)
Pink
Blue
Green
Red
[b]Example #2 - Desired Look[/b]
Pink
Blue
Green
Red
Example #3 - Upside down is almost there...
Red
Green
Blue
Pink
Ich verstehe, dass der Lücken angezeigt wird, weil der dichte Modus wie angegeben funktioniert - Fülllöcher in früheren Zeilen zuerst (Beispiel 1). Trotzdem möchte ich einen Weg finden, die Lücke zwischen den rosa und den roten Divs zu entfernen, ohne auf manuelle Reihenplatzierungen zurückzugreifen (Beispiel 2). Diese Anordnung zeigt jedoch den Überblick über das, was
ich möchte (Beispiel 3).>
Ich arbeite an einer Benutzeroberfläche mit vielen blockigen Elementen unterschiedlicher Breiten. [url=viewtopic.php?t=14917]Ich möchte[/url] kleinere Blöcke nach oben und größere Blöcke näher am Boden. Wenn möglich, möchte ich Lücken zwischen Blöcken vermeiden. Das folgende repräsentative Beispiel zeigt jedoch ein Szenario, das ich festgestellt habe, in dem noch ein Lücken auftreten kann. In Ihrer Antwort erhalten Sie in Ihrer Antwort bitte die Styles für die Gitterspalte und behalten Sie die Sortierung des inneren Divs.[code].grid {
background-color: grey;
min-height: 100px;
margin-bottom: 10px;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}< /code>
Example #1 - Given HTML (notice gap between pink/red)
Pink
Blue
Green
Red
[b]Example #2 - Desired Look[/b]
Pink
Blue
Green
Red
Example #3 - Upside down is almost there...
Red
Green
Blue
Pink
[/code]
Ich verstehe, dass der Lücken angezeigt wird, weil der dichte Modus wie angegeben funktioniert - Fülllöcher in früheren Zeilen zuerst (Beispiel 1). Trotzdem möchte ich einen Weg finden, die Lücke zwischen den rosa und den roten Divs zu entfernen, ohne auf manuelle Reihenplatzierungen zurückzugreifen (Beispiel 2). Diese Anordnung zeigt jedoch den Überblick über das, was [url=viewtopic.php?t=14917]ich möchte[/url] (Beispiel 3).>
Mobile version