I want to show only the first row of the Grid and hide other rows.
I know we can do this by using max-height and the @media queries, but in this case, the height of each item in the grid should be the same.
But in my case, the height of each item in the grid is not the same, so when I use above solution, it doesn't work correctly.
Is there any way to set the max-height of the grid container the same as the max-height of the items in the first line?
I recently had to solve the same problem (the height of the items in the row varied with screen size - so couldn't easily set a max-height to cut them off).
I the end I manipulated the height of the rows by adding this CSS to the containing element:
grid-template-rows: 1fr 0 0 0 0 0;
overflow: hidden;
Basically the 1st row will have normal height and subsequent rows will have zero height. I added enough zeros to account for the max number of rows I would get on the smallest screen size (I had 6 items in my grid).