Grid element overflowing on small screens

HTML-CSS
1

Hey everyone,

I am having an issue with my css grid. I have set the minimum height and width of the grid with VH and VW units, but on a small screen the scrollbar appears. I want the grid to fit in any size screen and never produce the scrollbars. Any help would be appreciated.

.grid-container{
  display: grid;
  max-height: 84vh;
  max-width: 84vw;
  margin: 0 auto;
  padding: 0;
  grid-gap: 10px;
  grid-template-columns: 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw 7vw ;
  grid-template-rows: 14vh 14vh 14vh 14vh 14vh 14vh;
}

Here is the repo

Here is the heroku
https://reactrpg.herokuapp.com/

2

Turns out I had to make the Body display flex as well. I am now facing a different issue: Even though the body has

display: flex;
justify-content:center;
align-items:center;

it is still putting the App component as touching the top of the screen.

3

Try giving body height of 100vh.

1 Like
4

Mate you have solved it, ty!