Good question - I managed to work around the issue with a wrapper, and using display: table
https://jsfiddle.net/8vjvnznk/
.wrapper {
display: grid;
grid-template-columns: 100px 100px 300px;
grid-template-rows: 200px 200px;
grid-gap: 10px;
background-color: #fff;
color: #444;
align-content: space-evenly;
}
.workaround{
border: 1px solid green;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: table;
}
h1{
font-size: 1em;
border: 1px solid yellow;
display: table-cell;
vertical-align: middle;
}
#boxc{
background: red;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 100%;
}
