Solucionado
Hola, el problema que tengo es que el footer se queda dentro de la grid del contenido , como muestra la imagen.!
style css
.app {
background: #f1f1f1;
display: grid;
grid-template-areas:
"encabezado"
"contenido"
"rodapie";
grid-template-columns: auto;
grid-template-rows: 50px 100vh auto;
}
.encabezado {
grid-area: encabezado;
}
.contenido {
grid-area: contenido;
}
.rodapie {
grid-area: rodapie;
}
desde ya gracias por la ayuda.
Ya quedo resuelto en otro tópico por @Juan Pablo Amador Palestina, dejo acá la misma respuesta por si no la encuentran. donde dice grid-template-rows: 50px 100vh auto; en los primeros capítulos dice grid-template-rows: 50px 110vh auto; pero en realidad por ahí del capitulo 4 dice ahora grid-template-rows: 50px auto auto; y es de este modo cuando el rodapie ya se puede observar correctamente al final del contenido.