Hola me pueden resolver la duda de porque al poner height: 100vh no me coge totalmente la pantalla y sigue dejando un espacio al final?? ...

Hola, andresagudeloj. Es muy probable que tu error radique en lo siguiente...

<div class="container">
        <div class="item header">Header</div>
        <div class="item left">Left</div>
        <div class="item right">Left</div>
        <div class="item content">Content</div>
        <div class="item footer">Footer</div>
	// Fijate en esta parte, es un 'div extra en la estructura
        <div class="item">contenido</div>
    </div>

Normalmente, si tienes algún div de sobra, pasará eso, (ó) tal vez en el css, estás declarando una fila de más. Algo así:

    grid-template: 100px 1fr 150px extra / 200px 1frx;

Siempre debemos estar al tanto de cuántas veces declaramos valores, esto genera esos espaciados indeseados.

Te deseo lo mejor, y espero que lo hayas podido solucionar :D

Simple Andres: Mira tu propiedad 'grid-template' , las 3 filas miden 200px (es decir 600px, esa es su altura, de allí no van a pasar). Asumo que tu monitor es de 720 de alto. Revisa el video del curso y veras que Leonidas agrega (para la fila del medio) 1fr como altura, para que la fila del medio ocupe el espacio "restante".

grid-template: 150px 1fr 100px/ 200px 1fr;

y porfa, pide el FAVOR a la próxima que tengas duda y requieras apoyo.

Relajate, es solo código.

Hola de nuevo!

Nos pueden compartir el código tanto del HTML como del CSS.

¡Nunca pares de aprender! 💚