CSS grid-auto-rows Property - Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.grid-container,
.grid-container2 {
   display: grid;
   margin-top: 5px; 
   padding: 10px; 
   background: rgb(0,150,208);
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center; 
} 
.grid-container {
   grid-template-columns: 50% 50%;
   grid-template-rows: 20px 20px;
   grid-auto-rows: 40px;
}
.grid-container2 {
   grid-template-columns: 50% 50%;
   grid-template-rows: 20px 20px; 
   grid-auto-rows: 25px 65px; 
}
.item-a {
   grid-row: 3 / 4;
   background: red !important;
}
.item-b {
   grid-row: 4 / 5; 
   background: yellow !important;
}
</style>
</head>
<body>
<div class="grid-container">
   <div class="item-a">A</div>
   <div class="item-b">B</div>
   <div>C</div>
   <div>D</div>
   <div>E</div>
   <div>F</div>
</div>
<div class="grid-container2">
   <div class="item-a">A</div>
   <div class="item-b">B</div>
   <div>C</div>
   <div>D</div>
   <div>E</div>
   <div>F</div>
</div>
</body>
</html>