The fiddle shows that it is not working (tested in chrome and firefox) : https://jsfiddle.net/Flyout/8gsx36qc/4/
<div style="
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content;
grid-template-areas:
'a b'
'c b';
border: 1px solid black;
">
<div style="grid-area: a; background: lightblue;">
Catering
</div>
<div style="grid-area: b; background: lightgreen;">
<p>Morning</p>
<p>Lunch</p>
<p>Snack</p>
<p>Dinner</p>
</div>
<div style="grid-area: c; background: lightsalmon;">
Total : 0.00 €
</div>
</div>
Whereas it works fine in https://www.cssgridplayground.com/ :
To clarify, the cell "Catering" should not take 50% of the available height, but it should fit its content. In consequence, the cell "Total" should take most of the height.
