Höhe der letzten Grid-Zeile soll auf verbleibenden Platz ausgeweitet werden

[borisbaer]

Hallo zusammen,

ich habe jetzt schon lange recherchiert, konnte aber keine passende Lösung finden: Ist es beim Grid-Layout möglich, die letzte Zeile die verbleibende Höhe des Parent-Elements einnehmen zu lassen? Allerdings ohne zu wissen, wie viele Zeilen das Grid-Layout haben wird.

Bei der ersten Zeile ist das kein Problem, aber wenn man nicht weiß, wie viele Zeilen das Layout haben wird, scheint es bei der letzten Zeile sehr schwierig oder gar unmöglich.

Muss ich dazu doch eher auf flexbox zurückgreifen?

Grüße
Boris

[Matthias Scharwies]

Servus!

Hallo zusammen,

ich habe jetzt schon lange recherchiert, konnte aber keine passende Lösung finden: Ist es beim Grid-Layout möglich, die letzte Zeile die verbleibende Höhe des Parent-Elements einnehmen zu lassen? Allerdings ohne zu wissen, wie viele Zeilen das Grid-Layout haben wird.

https://css-tricks.com/implicit-grids-repeatable-layout-patterns-and-danglers/

Grad die Woche auf css-Tricks gesehen.

items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

Er bezeichnet das als „danglers“

Herzliche Grüße

Matthias Scharwies

[borisbaer]

Servus!

Hallo zusammen,

ich habe jetzt schon lange recherchiert, konnte aber keine passende Lösung finden: Ist es beim Grid-Layout möglich, die letzte Zeile die verbleibende Höhe des Parent-Elements einnehmen zu lassen? Allerdings ohne zu wissen, wie viele Zeilen das Grid-Layout haben wird.

https://css-tricks.com/implicit-grids-repeatable-layout-patterns-and-danglers/

Grad die Woche auf css-Tricks gesehen.

items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

Er bezeichnet das als „danglers“

Herzliche Grüße

Matthias Scharwies

Hmm … funktioniert bei mir leider nicht. Es tut sich einfach nichts, wenn ich z.B. das hier eingebe:

.game #details:has(div:last-of-type:nth-of-type(odd)) div:first-of-type { background: red; }

[Matthias Scharwies]

Servus!

Hmm … funktioniert bei mir leider nicht. Es tut sich einfach nichts, wenn ich z.B. das hier eingebe:

.game #details:has(div:last-of-type:nth-of-type(odd)) div:first-of-type { background: red; }

Warte noch ein bisschen.

If… then… CSS has conditional logic powers! We’re only talking about support for Safari TP and Edge/Chrome Canary at the moment, but that’s pretty awesome.

caniuse: has()

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

da würde ich wirklich noch ein bisschen warten. Dass Chromia jetzt :has unterstützen, ist schön, aber bis Fuchs und Safari mitziehen, kann noch was dauern.

Rolf

[Auge]

Hallo

da würde ich wirklich noch ein bisschen warten. Dass Chromia jetzt :has unterstützen, ist schön, aber bis Fuchs und Safari mitziehen, kann noch was dauern.

Alsdo wenn CanIUse seine Farben nicht geändert hart, ist gegenwärtig Safari (MacOS, iOS) der einzige Browser, der das kann. Chrome wird es ab der kommenden Version 105 können, bei Firefox und allen anderen Browsern ist nix in Sicht.

Tschö, Auge

[Rolf B]

Hallo Auge,

ich nehme alles zurück und behaupte das Gegenteil 😉

Wenn Chrome es bringt, wird es in Edge und Opera auch kommen. Und der Fuchs mit Familie - ja, da muss man sehen was passiert.

Rolf

[Gunnar Bittersmann]

@@Matthias Scharwies

Hmm … funktioniert bei mir leider nicht. Es tut sich einfach nichts, wenn ich z.B. das hier eingebe:

.game #details:has(div:last-of-type:nth-of-type(odd)) div:first-of-type { background: red; }

Warte noch ein bisschen.

Warum? Worauf denn?

caniuse: has()

canidowithout: has()

🖖 Живіть довго і процвітайте

PS. “Your comment is awaiting moderation.”

[Rolf B]

Hallo Gunnar,

ich hätte mit all dem hier zwei Probleme.

(1) Ein kleines Problemchen:

da diese ganze Nummer ohnehin nur mit 3 Spalten funktioniert, sollte man das auch klar darstellen.

.grid {
  display: grid;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

(2) Ein Problem-Whopper:

In der Frage ist von der Höhe der letzten Zeile die Rede, nicht von der Breite einer Spalte.

Rolf

[Gunnar Bittersmann]

@@Rolf B

.grid {
  display: grid;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(3, 1fr);
}

Der Sinn erschließt sich mir nicht. Warum nicht grid-template-columns: repeat(3, 100px)?

In der Frage ist von der Höhe der letzten Zeile die Rede, nicht von der Breite einer Spalte.

Ich hatte zu dem von @Matthias Scharwies verlinkten Artikel auf CSS-Tricks geantwortet, unabhängig davon, ob der zur Lösung von @borisbaer’s Problem relevant ist.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Der Sinn erschließt sich mir nicht. Warum nicht grid-template-columns: repeat(3, 100px)

Weil Zeilen keine Spalten sind? Dein Codepen hatte auto-columns mit 1fr und nicht mit 100px.

Ich hatte zu dem von @Matthias Scharwies verlinkten Artikel auf CSS-Tricks geantwortet, unabhängig davon, ob der zur Lösung von @borisbaer’s Problem relevant ist.

Ja, das Problemchen bezog sich auch eher auf den ganzen Thread. Borisbär möchte Höhe der letzte Zeile aufpusten. Und alles hier im Thread beschäftigt sich mit der Breite einer Solitärzelle am Grid-Ende...

Ach. Nein. Deine Auto-Idee vom 8.8. 20:25 hab ich übersehen.

Rolf

[Gunnar Bittersmann]

@@borisbaer

ich habe jetzt schon lange recherchiert, konnte aber keine passende Lösung finden: Ist es beim Grid-Layout möglich, die letzte Zeile die verbleibende Höhe des Parent-Elements einnehmen zu lassen? Allerdings ohne zu wissen, wie viele Zeilen das Grid-Layout haben wird.

Was richtig Gutes ist mir noch nicht eingefallen, aber ein Workaround für den Fall, dass in der letzen Zeile nur das letzte Item ist: generiere hinreichend viele Zeilen der Höhe auto (die leer bleibenden haben dann Höhe 0) plus eine der Höhe 1fr für das letzte Griditem. row-gap muss dabei 0 sein. ☞ Beispiel

Muss ich dazu doch eher auf flexbox zurückgreifen?

Wie sollte das damit gehen?

🖖 Живіть довго і процвітайте

[borisbaer]

Hallo Gunnar,

Was richtig Gutes ist mir noch nicht eingefallen, aber ein Workaround für den Fall, dass in der letzen Zeile nur das letzte Item ist: generiere hinreichend viele Zeilen der Höhe auto (die leer bleibenden haben dann Höhe 0) plus eine der Höhe 1fr für das letzte Griditem. row-gap muss dabei 0 sein. ☞ Beispiel

ja, das wäre eine Möglichkeit, allerdings nicht sehr elegant. Ich denke, fürs Erste werde ich mich einfach darauf verlassen, dass wohl ohnehin genügend Zeilen vorhanden sein werden. Vielleicht kommt ja irgendwann ein besseres Workaround daher.

Muss ich dazu doch eher auf flexbox zurückgreifen?

Wie sollte das damit gehen?

Ich meinte damit, einfach das ganze Tabellen-Layout auf flexbox umzustellen, war nicht auf grid bezogen. Habe mich jetzt aber doch dagegen entschieden.

Grüße
Boris

[Gunnar Bittersmann]

@@borisbaer

Muss ich dazu doch eher auf flexbox zurückgreifen?

Wie sollte das damit gehen?

Ich meinte damit, einfach das ganze Tabellen-Layout auf flexbox umzustellen

Das war mir schon klar.

Aber wie willst du es anstellen, dass die Flexitems in der letzten Zeile die ganze zur Verfügung stehende Höhe einnehmen? Zumal es bei Flexbox (bei flex-direction: row) soetwas wie „letzte Zeile“ nicht gibt.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

im Moment kann ich mir nur eine Javascript-Lösung vorstellen, die mit Observern auf Größenänderungen des Grid und das Hinzufügen oder Entfernen von Griditems reagiert, sich "einen Überblick" über die Grid-Items verschafft und das row-Template bedarfsweise anpasst.

Aber schick finde ich das nicht und habe deshalb auch noch keinen Versuch gemacht, das zu realisieren.

Rolf

[borisbaer]

Hallo Gunnar,

Aber wie willst du es anstellen, dass die Flexitems in der letzten Zeile die ganze zur Verfügung stehende Höhe einnehmen? Zumal es bei Flexbox (bei flex-direction: row) soetwas wie „letzte Zeile“ nicht gibt.

ich würde flex-direction: column für den Container nehmen und die Zeilen dann in Row-Wrapper stecken. Dann dem letzten Row-Wrapper flex-grow: 1 verpassen.

Grüße
Boris

[Gunnar Bittersmann]

@@borisbaer

ich habe jetzt schon lange recherchiert, konnte aber keine passende Lösung finden: Ist es beim Grid-Layout möglich, die letzte Zeile die verbleibende Höhe des Parent-Elements einnehmen zu lassen? Allerdings ohne zu wissen, wie viele Zeilen das Grid-Layout haben wird.

Bei der ersten Zeile ist das kein Problem

Ja.

aber wenn man nicht weiß, wie viele Zeilen das Layout haben wird, scheint es bei der letzten Zeile sehr schwierig oder gar unmöglich.

Bin dem Ziel etwas näher gekommen. Aber immer noch weit entfernt.

🖖 Живіть довго і процвітайте