¿Por qué mi rejilla CSS, el menú, no ocupa toda la longitud de la fila?

¿Cómo puedo hacer que el div “Menú” ocupe toda la longitud de la fila? Lo he definido para que ocupe toda la fila, pero se detiene en el nivel 3 de la cuadrícula.

Mi código:

.wrapper{
border: 1px solid black;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
grid-template-rows: 40px auto 40px;
/* grid-auto-rows: auto; */
grid-gap: 5px;
background-color: chartreuse;}

.wrapper > div{
font-size: 1.8rem;
text-align: center;
border: 1px solid blue;
background-color: burlywood;}

.header{
grid-column: 2/-1;}

.menu{
grid-row: 1/4;}

.content{
grid-column: 2/-1;
grid-row: 2/4;}

.footer{
grid-column: 2/-1;}