CSS Grid - Grid item not filling full space when left menu is closed


I have created a grid using CSS - Grid. It works fine when the left hand menu is open but when it is closed some of the items don't fill the whole row. Please see screenshots. I have experimented with the below code

Wrapper div

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

Left Navbar open Left bar open Left Navbar closed Left bar closed

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

As you can see when the screen gets wider the content title (such as Learning Journal) takes up one line instead of two. This makes the content shorter and with it the item shrinks and does not fill the row.

How can I make the shrunken grid items fill the whole of the row regardless of the content?


Answers: