grid-template Area Problem

[ebody]

Hallo,

ich möchte ein Grid mit Areas erstellen:

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

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

[ebody]

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

[Gunnar Bittersmann]

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

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

[ebody]

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.

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

Gruß ebody

[Gunnar Bittersmann]

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

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

---

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

[ebody]

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

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

[Gunnar Bittersmann]

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

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

[MudGuard]

Hi,

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

[Gunnar Bittersmann]

@@MudGuard

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

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

[MudGuard]

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