Cover from https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/colortheory.jpg

Today I was working in a little board game I started with a friend and tried to solve something I was avoiding for some time now: how to make the board responsive.

I used CSS Grid for making a 9x9 board with as much space as possible, given the height/width of the window. I also tried using the vw unit, but when the window's height was less than the width, the page size would overflow vertically. The same did happened with vh but with a horizontal overflow.

Solution

So, how is it possible to adapt a fixed css grid with 9x9 (or whatever) squares? With Media Queries! (or at least is what I found.) Using the orientation condition we can change the unit we're using. This specific snippet is what I used for the board:

.board {
  display: grid;
  grid-template-columns: repeat(9, 10vh);
  grid-template-rows: repeat(9, 10vh);
  gap: 0.2em;
}

@media screen and (orientation: portrait) {
  .board {
    /* no more overflow with this! yay! */
    grid-template-columns: repeat(9, 10vw);
    grid-template-rows: repeat(9, 10vw);
  }
}

Demo

If you know something better than this approach, feel free to respond! Thank you 😄!