grid-template Area Problem

[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