cssgrid | The 1140px CSS Grid , fluid to mobile | Grid library

I am trying to get a hold of the CSS Grid, a transition from previously using the Bootstrap that I'm used to.

I created a simple layout (4 rows & 6 columns) however, there is an unwanted whitespace on the bottom, causing a visible scroll.

Is there a way to fix this without setting the exact height to the .container element? When I set the height to the .container (height: 500px), the problem goes away. Is this the way to go around it? I don't want to use a quick fix that will cause me a problem down the way maybe on smaller or larger viewports.

Im trying to insert 8 images into a 2x4 CSSGrid. I have width set to 100% but when I set height to 100% the bottom row of images end up below the footer instead of below the first row of images. Setting the height using px works, but its not responsive at all compared to using %. Any ideas? Ive been told using flexbox would be better but I want to just strictly use CSSGrid for this problem.

Im trying to insert these 8 images into a CSSGrid. I made it so that the grid has 4 columns and 2 rows. I set the heigh and width of the img to 100% thinking itd take up the space of one column in each row. Instead the images come out way bigger than intended. Im using a nested grid, which I think im not implementing correctly. For example, Ill set the width and height of the images to 300px and one row will have more than 4 pictures. I think thats cause the images arent taking up the full size of the column but im not sure. When i inspect element I cant seem to see the CSSGrid Any help?

I need some help with positioning my Grid Items while using Material UI.

Codesandbox is where I am so far (roughly).

And my question is quite simple - how do I get 2 & 3 to go to the right of 1? I kinda do it but there are all those weird spaces to the left and down that, I cannot figure out how to deal with.

That's the end result I'm after:

Thank you.

I would like to use grouping feature for the GridList component. But when I used to grouping feature, the list items can not show separate rows. The all items show in inline position. I'm using the same coding just like in the this url

Here is the screenshow of my view https://ibb.co/M90Pb5T

Here is my coding:

The green line should be drawn threw until the bottom as a timeline. The length is calculated by each sections of unique cssgrid height in JavaScript. All entries look absolutely the same by codebase, but for any reason only the topmost is displayed. I've tried to play around with position: absolute and position: relative for both the content and the green line, but it didn't work.

Is there something hidden or above the other?

this is the desired result (similar to fibonacci's grid):

I know this is posible using css grid, but as i'm not as familiar as I would like to, I tried using this https://cssgrid-generator.netlify.com/ like so:

im having a bit of a problem.

Im trying to make some element hide, when the user scrolls down. But i having a weird issue/problem. When I use the function pageYOffset, i keeps showing 0, like im not scrolling on the page. I think i may be because of the use of cssgrid (still new to this). you can see my problem here my cssgrid site.

Here on my test site is show update the "scroll counter" when scrolling but it only does it when i scroll negativ (< 0).

Anyone else that have dealt with this problem or have a solution to my problem ?

I'm looking at building a data table using css grids. The idea would be that it is ready to be fully responsive. Take the following example: https://jsfiddle.net/9L46zfp7/