ebody: grid-template Area Problem

problematische Seite

Hallo,

ich möchte ein Grid mit Areas erstellen:

Grid Area

Die Werte für grid-template enthalten aber einen Fehler. Ich verstehe/sehe aber nicht warum.

grid-template Fehler

main {
  grid-area: main;
  display: grid;
  grid-template: 
  "main-header main-header" auto / 1fr 1fr
  "main-feed main-feed" auto / 1fr 1fr
  "main-user main-tasks" auto / 50% 50%;
  align-content: start;
  justify-content: start;
  align-items: start;
  justify-items: start;
}

Gruß ebody

  1. problematische Seite

    Ich hab das Problem gefunden.

    Die Aufteilung der Spalten wird in der letzten Zeile festgelegt:

      grid-template: 
      "main-header main-header" auto
      "main-feed main-feed" auto
      "main-user main-tasks" auto / 50% 50%;
    

    In den Kindelementen musste ich dann width: 100%; einfügen, damit die den vollen verfügbaren Raum nutzen.

    *{
     box-sizing: border-box;  
    }
    
    main {
      grid-area: main;
      display: grid;
      grid-template: 
      "main-header main-header" auto
      "main-feed main-feed" auto
      "main-user main-tasks" auto / 50% 50%;
      align-content: start;
      justify-content: start;
      align-items: start;
      justify-items: start;
    }
    
    #main-header{
      width: 100%;
      grid-area: main-header;
      background: rgba(31,171,41,.4);
      border: solid 4px rgba(31,171,41,1);
    }
    
    #main-feed{
      width: 100%;
      grid-area: main-feed;
      background: rgba(171,169,31,.4);
      border: solid 4px rgba(171,169,31,1);
    }
    
    #main-user{
      width: 100%;
      grid-area: main-user;
      background: rgba(171,31,169,.4);
      border: solid 4px rgba(171,31,169,1);
    }
    
    #main-tasks{
      width: 100%;
      grid-area: main-tasks;
      background: rgba(31,34,171,.4);
      border: solid 4px rgba(31,34,171,1);
    }
    

    Gruß ebody

    1. problematische Seite

      @@ebody

      Ich hab das Problem gefunden.

      Ich glaube nicht.

      In den Kindelementen musste ich dann width: 100%; einfügen, damit die den vollen verfügbaren Raum nutzen.

      Das ist nicht nötig.

      Ich glaube, ich hab das Problem gefunden:

      main {
        justify-items: start;
      }
      

      Siehe Codepen.

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

      --
      „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
      — @Grantscheam auf Twitter
      1. problematische Seite

        Ich glaube nicht.

        Ich glaube doch.

        Es ging darum:

        Die Werte für grid-template enthalten aber einen Fehler. Ich verstehe/sehe aber nicht warum.

        grid-template Werte Fehler

        Danke für den Hinweis bzgl. width und justify-items: start;

        Gruß ebody

        1. problematische Seite

          @@ebody

          Ich glaube nicht.

          Ich glaube doch.

          Nein! Doch! Oh![1]

          Dein Problem war, dass du justify-items: start gesetzt hast.

          Die Lösung ist nicht, an unzähligen Stellen width: 100% hinzuzufügen, sondern justify-items: start wegzunehmen. KISS.

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

          --
          „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
          — @Grantscheam auf Twitter

          1. s.a. meine Lieblingsfolie von diesjährigen World Usability Day in Berlin ↩︎

          1. problematische Seite

            Das Problem war dieser Fehler. Lies doch mal bitte meinen ersten Beitrag und meine Antwort/Lösung darauf.

            grid-template Werte Fehler

            Das hatte nichts mit justify-items: start zu tun.

            Das Problem lag hier:

            main {
            ...
              grid-template: 
              "main-header main-header" auto / 1fr 1fr
              "main-feed main-feed" auto / 1fr 1fr
              "main-user main-tasks" auto / 50% 50%;
            ...
            }
            

            Die Spaltenangabe macht man in der letzten Zeile der Grid Areas. Dann gibt es keine Fehlermeldung mehr.

            main {
            ...
              grid-template: 
              "main-header main-header" auto
              "main-feed main-feed" auto
              "main-user main-tasks" auto / 50% 50%;
            ...
            }
            

            Gruß ebody

            1. problematische Seite

              @@ebody

              Das hatte nichts mit justify-items: start zu tun.

              Doch, hatte es. (Zumindest das, was ich als dein Problem angesehen hatte.) Wenn du das angibst, gehen die Boxen nicht über die Breite, die sie haben sollen. Das, was du mit etlichen width: 100% zu beheben gedachtest.

              Das Problem lag hier:

              Deinen Syntaxfehler hatte ich gar nicht bemerkt. Ich bin gleich auf deinen Codepen, wozu soll ich mir Bilder ansehen? Als ich deinen Codepen aufgerufen hatte, hattest du den Syntaxfehler offenbar schon korrigiert.

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

              --
              „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
              — @Grantscheam auf Twitter
  2. problematische Seite

    Hi,

    Grid Area

    Hilfe, ich bin blind!

    Nächstes Mal bitte hellgrau auf mittelgrau verwenden.

    Kann man genauso schlecht lesen, aber man stirbt nicht an Augenkrebs …

    cu,
    Andreas a/k/a MudGuard

    1. problematische Seite

      @@MudGuard

      Grid Area

      Hilfe, ich bin blind!

      Nächstes Mal bitte hellgrau auf mittelgrau verwenden.

      Kann man genauso schlecht lesen, aber man stirbt nicht an Augenkrebs …

      img { filter: grayscale(1) }
      

      in dein Nutzerstylesheet – Problem solved. 🤪

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

      --
      „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
      — @Grantscheam auf Twitter
      1. problematische Seite

        Hi,

        img { filter: grayscale(1) }
        

        in dein Nutzerstylesheet – Problem solved. 🤪

        Da ich ja jetzt blind bin, kann ich den Vorschlag von Dir gar nicht lesen ;-)

        cu,
        Andreas a/k/a MudGuard