CSS网格-关闭左侧菜单时，网格项目未填满空间

Question

我已经使用CSS创建了一个网格-网格。当左侧菜单打开时，它可以正常工作，但是当左侧菜单关闭时，某些项目不会填满整个行。请看截图。我已经尝试过以下代码

包装div

style='display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; grid-template-areas: "main";

左侧导航栏打开 左侧导航栏关闭

<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）占据一行而不是两行。这样可以缩短内容，并且内容会缩小并且不会填满行。

无论内容如何，​​如何使缩小的网格项目填满整个行？