html - CSS Grid images are not responsive

Question

Imagine a grid layout like that:

.chest
  width: 100vw
  height: 100vh
  display: grid
  grid-template-columns: 1fr 3fr 1fr
  grid-template-rows: 1fr 4fr
  grid-template-areas: "buttons categories parents" 
                       "games games games"

Inside games, I have other grid box with scroll in X axis:

<div class="chest__games">
      <img
        class="chest__games__game"
        v-for="(game, index) in selectedCategory.games"
        :key="index"
        @click="clickOnGame(game, index)"
        :src="getGameIconPath(game)"
      />
</div>

chest__games
    grid-area: games
    padding: 2%
    display: grid
    grid-template-rows: repeat(2, 1fr)
    grid-gap: 2vw
    grid-auto-flow: column
    overflow-x: scroll
    background-color: rgba(0, 0, 0, .65)
    &__game
      height: 100%

But with this CSS, the first row of "games" have the same height as the grid heigth and the second row is outside the screen.

I want to set the games container (4fr) fixed at this height, and every row of games have 50% of that height.

question from:https://stackoverflow.com/questions/65897756/css-grid-images-are-not-responsive

Answer 1

Waitting for answers