Peter G.: grid areas

Hallo,
ich habe eine "uralte" Homepage, die ich gerne modernisierne möchte. Daher habe ich seit Wochen immer mal wieder ins Forum geschaut, wo es viele Beiträge zu flex und grid gab.
Bevor ich mich in dem Dschungel verirre, folgende Frage.
Geht nachfolgendes mit einer grid area?

  1. Servus!

    Hallo,
    ich habe eine "uralte" Homepage, die ich gerne modernisierne möchte. Daher habe ich seit Wochen immer mal wieder ins Forum geschaut, wo es viele Beiträge zu flex und grid gab.
    Bevor ich mich in dem Dschungel verirre, folgende Frage.
    Geht nachfolgendes mit einer grid area?

    Ja, natürlich!

    Bedingung: Deine Rasterfelder sind Kindelemente des Grid-Containers. Dann etwa so:

    body {
      display:  grid;
      grid-template-columns:  8em calc(30% - 8em)  1fr;
    }
    
    .obenlinks {
      grid-column: 1 / 3;   /*eben die 30% */
    }
    
    . obenrechts {
      grid-column: 3 / 4; 
    /*  aber gar nicht nötig */
    }
    
    mittelinks {
    /*  keine Festlegung nötig  */
    }
    
    .mitterechts {
      grid-column:  2 / 4;   /* alles, was nicht zwiwchen 1 und  2 ist (eben die 8em)  */
    
    .ganz {
      grid-column: 1 / -1;   /* von der ersten Gridlinie bis zur letzten */
    }
    
    
    

    Probier's mal aus!

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Danke für den prompten Lösungsvorschlag, den ich erfolgreich testen konnte!

      1. @@Jens

        Danke für den prompten Lösungsvorschlag, den ich erfolgreich testen konnte!

        Dann hast du beim Testen was falsch gemacht.

        Der rote Bereich ist 8em breit, nicht 30%. Codepen

        EDIT: Link berichtigt.

        😷 LLAP

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      2. Hallo Jens,

        ich sehe gerade "Zeile 3 und folgende" in deinem Plan. Da scheint mir ein Grid für die ganze Seite, das die Unterteilungen oben in Zeile 1+2 macht, nicht richtig.

        Es dürfte mutmaßlich besser sein, den grauen Bereich aus dem Grid auszukoppeln und nur die beiden ersten Zeilen als Grid zu formatieren. Ich nehme an, dass das der Seitenkopf ist. Es könnte eine Lösung sein, diese 4 Bereiche in ein <header> Element zu setzen und dieses zum Grid zu machen.

        Wenn denn genug Platz ist, wie Gunnar anmerkte. Leider hat er nur das Problem dargestellt und den Lösungsvorschlag ausgelassen. 8em / 30% ≈ 26.7em, d.h. bei einer Viewportbreite - genauer: Grid-Breite - von unter 27em droht die Spalte 2 eine negative Breite zu bekommen. 27em ist schon wenig, da sind Media Breaks angesagt, um zumindest den Kopfbereich auf ein anderes Layout umzuschalten. Da hilft mein Vorschlag mit den benannten Bereichen weiter.

        Wie man das konkret macht, muss man schauen - dafür müsstest Du ein Seitenlayout für Viewports unter 27em machen. Ob das der ideale Umschaltpunkt ist oder ob man das eher schon bei einer höheren Breite macht, ist deine Designentscheidung.

        Am Desktop testen kannst Du das einfach durch Variieren der Fenstergröße deines Browsers, oder mit dem Device-Simulator der Entwicklertools des Browsers.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. @@Rolf B

          Wenn denn genug Platz ist, wie Gunnar anmerkte. Leider hat er nur das Problem dargestellt und den Lösungsvorschlag ausgelassen.

          Und zwar ganz bewusst.

          Mein Posting soll als Anregung dienen, zunächst über die Anforderungen nachzudenken. Vielleicht ist es bei schmaleren Viewports ja gar nicht sinnvoll, 30:70 aufzuteilen.

          Lösungen für unspezifizierte Anforderungen zu präsentieren (also Nicht-Lösungen), überlasse ich gern anderen.

          😷 LLAP

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          1. Hallo Gunnar,

            Lösungen für unspezifizierte Anforderungen zu präsentieren (also Nicht-Lösungen)

            genau das hat Cheatah damals wohl auch gemeint.

            Live long and pros healthy,
             Martin

            --
            Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
    2. Hallo Matthias,

      grid-template-columns: 8em calc(30% - 8em) 1fr;

      In die Falle bin ich neulich schonmal getappt. Das ist mit calc unnötig kompliziert. Es ist eleganter, nicht die zweite Spalte vorzugeben und die dritte auffüllen zu lassen, sondern andersrum:

      grid-template-columns: 8em 1fr 70%;

      Alternativ zu Spaltenzuordnungen über Nummern kann man eventuell - je nach Problemstellung - das Grid auch namentlich aufbauen. Siehe Wiki.

      body {
        display:  grid;
        grid-template: "rot   rot   grün" auto
                       "blau  gelb  gelb" auto
                       "grau  grau  grau" auto 
                      / 8em   1fr   70%;
      }
      
      .oben-links   { grid-area: rot; }
      .oben-rechts  { grid-area: grün; }
      .mitte-links  { grid-area: blau; }
      .mitte-rechts { grid-area: gelb; }
      .unten        { grid-area: grau; }
      

      Rolf

      --
      sumpsi - posui - obstruxi
    3. @@Matthias Scharwies

      Geht nachfolgendes mit einer grid area?

      Ja, natürlich!

      Nein, natürlich nicht!

      Da je nach Viewportbreite 30% größer, gleich oder kleiner 8em ist, kann das mit Grid nicht gehen.

      Probier's mal aus!

      Tja, hättest du mal!

      😷 LLAP

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon