Christian Huml: Grid nur möglich mit body?

Hallo zusammen,

ist Grid nur möglich mit der Verwendung body oder gibt es noch andere Möglichkeiten?

Mit freundlichen Grüßen

Christian Huml

  1. Hallo,

    ist Grid nur möglich mit der Verwendung body oder gibt es noch andere Möglichkeiten?

    eindeutig ja!

    ja, nur möglich mit body, da sonst das html unvollständig ist.
    ja, anderen Element das Grid verpassen ist möglich.

    Gruß
    Kalk

  2. Hallo Christian,

    die Beispiele zeigen eine Einsatzmöglichkeit. Das ist deshalb aber nicht die einzige.

    Auf den ersten Blick sehe ich in der Spec keinen Hinweis, dass man Grid-Layout nur bei ganz bestimmten Elementen verwenden darf. Daher wäre die Annahme naheliegend, dass grid-Layout für alle Elemente mit Flow-Content nutzbar ist.

    Rolf

    --
    sumpsi - posui - clusi
  3. @@Christian Huml

    ist Grid nur möglich mit der Verwendung body oder gibt es noch andere Möglichkeiten?

    Wie Jen Simmons sagt: “We’ll use Grid on certain parts of the page, and not on othe parts of the page. […] It doesn’t handle layout for the whole page. It handles layout for a particular container […] and the items on the page that are […] a direct child of that container.” (in Layout Land, Flexbox vs. CSS Grid — Which is Better?)

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar Bittersmann,

      irgendwie verstehe ich Grid nicht ganz. Kann Grid und Flexbox gleichzeitig genutzt werden? Wie wäre es in meinem Beispiel überhaupt möglich das a-Element am Ende der Box zu rastern? Habe gelesen dass Grid ein eigener Container ist, dann bräuchte ich ja keinen eigenen Container nicht mehr oder?

      Mit freundlichen Grüßen

      Christian Huml

      1. @@Christian Huml

        Kann Grid und Flexbox gleichzeitig genutzt werden?

        Wenn du mit „gleichzeitig“ gleichzeitig für dasselbe Element meinst, dann natürlich nicht.

        Wenn du mit „gleichzeitig“ gleichzeitig auf einer Seite meinst, aber jadoch!

        Wie wäre es in meinem Beispiel überhaupt möglich das a-Element am Ende der Box zu rastern?

        Ich hatte dir doch ein Video von Jen Simmons’ YouTube-Kanal Layout Land verlinkt. Da werden doch als Empfehlungen auch andere Videos angegeben. So schwer zu finden?

        Ich würde denken, in Flexbox + Grid Together = Easy Gallery Layout beschreibt sie genau das, was du willst.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          Ich würde denken, in Flexbox + Grid Together = Easy Gallery Layout beschreibt sie genau das, was du willst.

          in dem Video ist mir eines aufgefallen

          Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?

          Bis bald!
          Meowsalot (Bernd)

          1. @@Meowsalot

            Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?

            Gut bemerkt.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. Hej Meowsalot,

            in dem Video ist mir eines aufgefallen

            Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?

            Dazu gibt es durchaus unterschiedliche Meinungen. @Gunnar Bittersmann wird dir zustimmen und hat Gründe dafür.

            Streng genommen ist nur eines wichtig: die Überschriftenstruktur muss logisch nachvollziehbar sein und dafür sorgen, dass die hierarchische Struktur des Dokumentes für Programme und Nutzer nachvollziehbar wird. Die WCAG gibt selber daher Beispiele an, bei denen es mehrere h1gibt.

            Auch ich selber vergebe in aller Regel nur eine h1

            Marc

            1. hallo

              Hej Meowsalot,

              in dem Video ist mir eines aufgefallen

              Es werden in jedem article eine h1 vergeben. Ich dachte eine h1 sollte immer nur einmal vergeben werden?

              Dazu gibt es durchaus unterschiedliche Meinungen. @Gunnar Bittersmann wird dir zustimmen und hat Gründe dafür.

              Streng genommen ist nur eines wichtig: die Überschriftenstruktur muss logisch nachvollziehbar sein und dafür sorgen, dass die hierarchische Struktur des Dokumentes für Programme und Nutzer nachvollziehbar wird. Die WCAG gibt selber daher Beispiele an, bei denen es mehrere h1gibt.

              Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.

              Deshalb sollte h1-h6 idealer Weise mit der Ergebnis dieses Algorithmus übereinstimmen.

              1. @@beatovich

                Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.

                Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. hallo

                  @@beatovich

                  Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.

                  Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?

                  Ich gehe davon aus, dass das DOM überall implementiert ist, und dies ist einer der Faktoren im Algorithmus.

                  Aber wir könnten ja mal ein Script entwickeln, das den Algorithmus anwendet, und so zum Debugging das Ergebnis in die Konsole ausgibt.

                  1. @@beatovich

                    Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.

                    Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?

                    Ich gehe davon aus, dass das DOM überall implementiert ist, und dies ist einer der Faktoren im Algorithmus.

                    Ich verstehe nicht, was dass DOM überall implementiert ist damit zu tun haben sollte, ob der Outline-Algorithmus irgendwo implementiert wäre.

                    (Außer dass DOM Voraussetzung für Outline-Algorithmus ist. Also wenn DOM nicht implementiert wäre, dann auch nicht Outline-Algorithmus.)

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. hallo

                      @@beatovich

                      Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden, natürlich im Wissen, dass dieser Algorithmus nur partiell implementiert ist.

                      Partiell implementiert?? In welchem Browser wäre welcher Teil des Outline-Algorithmus implementiert?

                      Ich gehe davon aus, dass das DOM überall implementiert ist, und dies ist einer der Faktoren im Algorithmus.

                      Ich verstehe nicht, was dass DOM überall implementiert ist damit zu tun haben sollte, ob der Outline-Algorithmus irgendwo implementiert wäre.

                      (Außer dass DOM Voraussetzung für Outline-Algorithmus ist. Also wenn DOM nicht implementiert wäre, dann auch nicht Outline-Algorithmus

                      Es braucht auch diese Konzepte:

                      • sectioning content
                      • sectioning roots
                      • heading content

                      Es gibt Geräte die ein Outline erzeugen. Dass populäre Browser das nicht tun ist kein Argument.

                      Ich sehe es auf jeden Fall so, dass ein Algorithmus besteht, und dass er demnach auch konsultiert werden darf, wenn's um den richtigen Umgang mit h1-h6 geht.

                      Dass ich dabei manchmal verbal entgleise, lass ich mir aber gern vorwerfen.

              2. Hej beatovich,

                Genauer, der im HTML-Standard beschriebene Outline-Algorithmus muss beachtet werden

                Nein, der spielt weder bei meinen Ausführungen,noch bei den WCAG-Beispielen irgendeine Rolle und ist nie in irgendeinem Browser implementiert worden.

                Den kannst du also getrost vergessen!

                Marc

      2. hallo

        Kann Grid und Flexbox gleichzeitig genutzt werden?

        Da beides Formen der display Eigenschaft sind, kannst du pro Element nur eines oder das andere anwenden. Eine Anwendung hat Konsequenzen für die unmittelbaren Kindelemente, deshalb sind deren Regeln entsprechend ihres gewünschten Verhaltens zum Elternelement zu schreiben.

      3. Hej Christian,

        Wie wäre es in meinem Beispiel überhaupt möglich das a-Element am Ende der Box zu rastern?

        Häh?

        Oder länger: versteh ich nicht.

        Oder noch länger: was ist ein „gerastertes“ a-Element? Wie soll das aussehen, wie soll es sich verhalten?

        Dein Beispiel benötigt aber dringend (mindestens) flex-wrap: wrap;

        Marc

        1. Häh?

          Oder länger: versteh ich nicht.

          Oder noch länger: was ist ein „gerastertes“ a-Element? Wie soll das aussehen, wie soll es sich verhalten?

          Dein Beispiel benötigt aber dringend (mindestens) flex-wrap: wrap;

          Hallo marctrix,

          da es ein Beispiel ist habe ich gedacht flex-wrap ist egal 😀 Nach deinen Wunsch habe ich es aber geändert 😀 In meinem Beispiel soll der Link bei den Boxen am Ende stehen, dies soll aber wiederum mit allen Boxen den gleichen Abstand haben. Dies soll auch zutreffen, wenn die Bildschirmgröße verändert wird oder der Text bei nicht ausreichenden Platz umbricht.

          Mein altes Beispiel.

          Mit freundlichen Grüßen

          Christian Huml

          1. Hallo nochmal,

            habe ein neues Beispiel erstellt, Beispiel 2 Grid wäre diese Vorgehensweise so richtig?

            grid-template-columns:1fr;
            grid-template-rows:1fr;
            

            Was ich immer noch nicht genau verstehe warum ausgerechnet der Link nun unten steht. Es geht mir jetzt nur um dass Verständnis. Könnte mir dass jemand erklären 😂

            Kann man den Wert fr umrechnen?

            Im Wiki steht:

            Im Flexbox Modul wurde für die zusammenfassende Eigenschaft flex ein ganzzahliger, einheitenloser Wert eingeführt, der einem Bruchteil des verfügbaren zu füllenden Platzes entspricht. Im Grid Layout Module erhält dieser Wert die Einheit fr (fraction, engl. für Bruchteil).

            Also wäre dass ein Bruchteil von der Höhe 12em da Breite: auto ?

            Mit freundlichen Grüßen

            Christian Huml

            1. @@Christian Huml

              habe ein neues Beispiel erstellt, Beispiel 2 Grid wäre diese Vorgehensweise so richtig?

              Nein. Du hast dir das genannte Video angesehen?

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. habe ein neues Beispiel erstellt, Beispiel 2 Grid wäre diese Vorgehensweise so richtig?

                Nein. Du hast dir das genannte Video angesehen?

                Hallo Gunnar Bittersmann,

                ja habe ich, besser gesagt beide: https://www.youtube.com/watch?v=hs3piaN4b5I, https://www.youtube.com/watch?v=dQHtT47eH0M.

                trotzdem stehe ich gerade auf der Leitung. 😂

                Mit freundlichen Grüßen

                Christian Huml

                1. @@Christian Huml

                  trotzdem stehe ich gerade auf der Leitung. 😂

                  bei Jen: außen grid, innen flex, d.h. Boxen sind Griditems und Flexboxen

                  bei dir: außen flex, innen grid, d.h. Boxen sind Flexitems und Grids

                  LLAP 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. bei Jen: außen grid, innen flex, d.h. Boxen sind Griditems und Flexboxen

                    bei dir: außen flex, innen grid, d.h. Boxen sind Flexitems und Grids

                    Hallo Gunnar Bittersmann,

                    warum darf dies nicht so sein?

                    Mit freundlichen Grüßen

                    Christian Huml

                    1. @@Christian Huml

                      bei Jen: außen grid, innen flex, d.h. Boxen sind Griditems und Flexboxen

                      bei dir: außen flex, innen grid, d.h. Boxen sind Flexitems und Grids

                      Hallo Gunnar Bittersmann,

                      warum darf dies nicht so sein?

                      Das darf schon, ist aber vielleicht nicht das, was du willst.

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                      1. @@Gunnar Bittersmann

                        Das darf schon, ist aber vielleicht nicht das, was du willst.

                        Warum außen Grid besser ist: du brauchst keine media queries. Mindesbreite der Griditems festlegen, fertig.

                        Warum innen Flexbox besser ist: es geht nur in eine Richtung (vertikal), ein Flexitem, das sich ausdehnt, und eins, das dies nicht tut.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Warum außen Grid besser ist: du brauchst keine media queries. Mindesbreite der Griditems festlegen, fertig.

                          Warum innen Flexbox besser ist: es geht nur in eine Richtung (vertikal), ein Flexitem, das sich ausdehnt, und eins, das dies nicht tut.

                          Hallo Gunnar Bittersmann,

                          so habe ich dies noch gar nicht betrachtet 😀

                        2. Hallo Gunnar Bittersmann,

                          wäre dieses Beispiel in deinem Sinne? Codepen

                          Hierzu noch eine Frage:

                          Bezieht sich der Wert minmax in diesem Beispiel 15em auf die Mindest- bzw. Maximalbreite?

                          grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
                          

                          Mit freundlichen Grüßen

                          Christian Huml

                          1. @Gunnar Bittersmann @Matthias Apsel

                            Nachtrag:

                            Eventuell könnte man mein Beispiel auch im Wiki hinterlegen (wenn Beispiel korrekt). Kann ich dies auch selber hinterlegen natürlich ohne Codepen?

                            Mit freundlichen Grüßen

                            Christian Huml

                            1. Hallo Christian Huml,

                              Eventuell könnte man mein Beispiel auch im Wiki hinterlegen (wenn Beispiel korrekt). Kann ich dies auch selber hinterlegen natürlich ohne Codepen?

                              Für das Beispiel selbst brauchst du Unterstützung, für die Seite die das Beispiel als Quelltext enthalten soll, kannst du selbst aktiv werden.

                              Bis demnächst
                              Matthias

                              --
                              Rosen sind rot.
                          2. @@Christian Huml

                            wäre dieses Beispiel in deinem Sinne? Codepen

                            Der mangelnde Farbkontrast ist nicht in meinem Sinne.

                            Die Textabsätze sind jeweils vertikal zentriert. Das soll so? Und was, wenn in so einer Box mehrere Absätze untereinanderstehen?

                            Hierzu noch eine Frage:

                            Bezieht sich der Wert minmax in diesem Beispiel 15em auf die Mindest- bzw. Maximalbreite?

                            grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
                            

                            15em ist der Mindestwert für die Breite. Durch die Angabe 1fr als Maximalwert sind alle Spalten im Raster gleich breit.

                            LLAP 🖖

                            --
                            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                            1. wäre dieses Beispiel in deinem Sinne? Codepen

                              Der mangelnde Farbkontrast ist nicht in meinem Sinne.

                              Die Textabsätze sind jeweils vertikal zentriert. Das soll so? Und was, wenn in so einer Box mehrere Absätze untereinanderstehen?

                              @Gunnar Bittersmann

                              Ja, dass mit den Farben wurde schlecht gewählt muss ich noch ändern. 😂 Dass es vertikal zentriert ist war in meinem Sinne. Bezüglich mehrere Absätze müsste ich noch testen. Werde es nochmal überarbeiten.

                              Mit freundlichen Grüßen

                              Christian Huml