Room landing page using CSS Grid

Hello! This challenge isn't completly finished yet, but i got stuck and need some help with the mobile design.

• What is the correct form to set the width and height to full page?

I had a lot of trouble making it full height and can't seem to find how to do it right.

• Why when i try to add the following code to the media query for the mobile design it behaves strange?

@media screen and (width >= 900) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
}

It would not change the grid layout. I couldn't find the way to make it a single column layout with 6 rows with each square in each row. I tried the same with grid-template-area and no result.

• Is it better to change to flexbox instead of css grid?

Any other feedback or suggestion will be very appreciated too.