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

problematische Seite

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

  1. problematische Seite

    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

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. problematische Seite

      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; }
      
      1. problematische Seite

        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

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        1. problematische Seite

          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

          --
          sumpsi - posui - obstruxi
          1. problematische Seite

            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

            --
            200 ist das neue 35.
            1. problematische Seite

              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

              --
              sumpsi - posui - obstruxi
        2. problematische Seite

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

          --
          When the power of love overcomes the love of power the world will know peace.
          — Jimi Hendrix
          1. problematische Seite

            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

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

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

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

              --
              When the power of love overcomes the love of power the world will know peace.
              — Jimi Hendrix
              1. problematische Seite

                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

                --
                sumpsi - posui - obstruxi
  2. problematische Seite

    @@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?

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

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. problematische Seite

      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

      1. problematische Seite

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

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

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix
        1. problematische Seite

          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

          --
          sumpsi - posui - obstruxi
        2. problematische Seite

          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

  3. problematische Seite

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

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

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix