How to make a grid height same with grid in responsive height in css

Question

I have some trouble and I just a new in css grid, I have 2 grid and their height did not same with their height in responsive height, I put some code and image in below :

• For image :

• Image when I set to responsive :

I want to make my website in images one that don't have scrolling like my website that I set to responsive

This for code in css :

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html {
  font-size: 22px;
}

.container {
  display: grid;
  height: 10px;
}

.content-left {
  background-color: #00c3ff;
  padding: 1rem;
  height: 44.3rem;
}

.content-right {
  background-color: #ffffff;
  padding: 1rem;
  height: 44.3rem;
}

@media (min-width: 1025px) {
  .container {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .content-left {
      height: 82.4rem;
  }

  .content-right {
      height: 82.4rem;
  }
}

Answer 1

Just change your Heights to 100vh.

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }

html {
  font-size: 22px;
}

.container {
  display: grid;
  height: 10px;
}

.content-left {
  background-color: #00c3ff;
  padding: 1rem;
  height: 100vh;
}

.content-right {
  background-color: #ffffff;
  padding: 1rem;
  height: 100vh;
}

@media (min-width: 1025px) {
  .container {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .content-left {
      height: 100vh;
  }

  .content-right {
      height: 100vh;
  }
}