CSS Grid. Im having trouble containing a title an image and a button

[Bionic-Dongle]

I'm using css grid,.... It all seemed so simple, but I spent hours yesterday trying to get a full page div to stick to viewport height when shifting a page between laptop and desktop, from screen to screen, on one there would be nothing hidden and no scroll bar on one screen, and then, in the next screen, there would be enough of the page hidden to be annoying and to create a scroll bar... I finally got it, I wanted a space for a title then an image under it, and then a button on the bottom, I assumed if I had a parent container for all three elements that they would stick together as I expanded minimally between the screens... this amount seems too small to be using media queries (yet), but, unfortunately, it hasn't worked as you can see in the Loom video they don't expand and contract in unison.....well they do but not the way I was expecting.
https://www.loom.com/share/66c54f7a4ab84a3cb663834f9aac10b7
Info including css in this google doc

 

[Atman Atos]

Share your code, and let me try to help you. Off the top of my head, usually, when it comes to grid, you want to watch out for the grid template columns/rows, since this determines the output.
i.e

.example {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

example 2

.example {
    display: grid;
    grid-template-columns: 1fr; /*default*/
}

example 3

.example {
    display: grid;
    grid-template-columns: 70% 30%;
}

The same goes for rows. Only your code can shine more light on what's specific to your project.