Я создал сетку, используя CSS - Grid.Он работает нормально, когда открыто левое меню, но когда оно закрыто, некоторые элементы не заполняют всю строку.Пожалуйста, смотрите скриншоты.Я экспериментировал с приведенным ниже кодом
Оболочка div
style='display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; grid-template-areas: "main";
Левый Navbar открыт 
Левый Navbar закрыт 
<div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content auto; grid-template-areas: 'main';">
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 5px 10px; grid-auto-rows: 100%;">
<div style="grid-area: 1 / 1 / span 2 / span 1;"> {InfoPane(not in screenshot)}</div>
<div style="grid-area: 1 / 2 / span 1 / span 1;"> {Blue Card Content}</div>
<div style="grid-area: 1 / 3 / span 1 / span 1;"> {Orange Card Content}</div>
<div style="grid-area: 1 / 4 / span 1 / span 1;"> {Green Card Content}</div>
<div style="grid-area: 1 / 5 / span 2 / span 1;"> {Grey Card Content}</div>
<div style="grid-area: 2 / 2 / span 1 / span 1;"> {Green2 Card Content}</div>
<div style="grid-area: 2 / 3 / span 1 / span 1;"> {Red Card Content}</div>
<div style="grid-area: 2 / 4 / span 1 / span 1;"> {Blue2 Card Content}</div>
<\div> <\div>
Как видно, когда экран становится шире, заголовок контента (например, Learning Journal) занимает одну строку вместо двух.Это делает содержимое короче, а вместе с этим элемент сжимается и не заполняет строку.
Как сделать так, чтобы уменьшенные элементы сетки заполняли всю строку независимо от содержимого?