Раздел карты с разметкой сетки

Question

Здравствуйте, в основном, у меня пока есть это (на мобильных устройствах мне удалось сделать его отзывчивым, но на больших экранах я не могу установить высоту макета так, чтобы она была одинаковой среди всех детей)

на рабочем столе:

на мобильном телефоне (нормально):

Но я не могу установить свой рост, когда это не мобильное устройство

Я хочу это:

код:

  <TestingLive>
    <div class="a">
      <span>a</span>
    </div>
    <div class="b">
      <span>b</span>
    </div>
    <div class="c">
      <span>c</span>
    </div>
    <div class="d">
      <span>d</span>
    </div>
    <div class="e">
      <span>e</span>
    </div>
  </TestingLive>

и мой css (со стилизованным компом)

const TestingLive = styled.div`
  display: grid;
  grid-template-areas:
    "a b c"
    "a d e";
  grid-gap: 4px;
  grid-template-columns: 40vw 1fr 1fr;

  ${media.lessThan("medium")`
  grid-template-columns:1fr;
  grid-auto-rows: 200px;
  grid-template-areas:
  'a '
  'b'
  'c'
  'd'
  'e';
  `}

  margin-top: 50px;
  & > * {
    background-color: #333;
    color: white;
    position: relative;
  }

  & .a {
    grid-area: a;
  }

  & .b {
    grid-area: b;
  }

  & .c {
    grid-area: c;
  }

  & .d {
    grid-area: d;
  }

  & .e {
    grid-area: e;
  }
`;

пример:

https://codesandbox.io/s/great-snowflake-4dwpy

@ Awais

если я использую: высота: 100%; максимальная высота: 60vh; min-height: 60 vh;

я получил это

но если я использую только высоту 60 vh, работает нормально

Answer 1

Установить высоту в vh, используя calc ИЛИ просто height:100vh, если на странице нет лишних пробелов, например margin padding et c

.fHHWeb {
    display: grid;
    grid-template-areas:
        "a b c"
        "a d e";
    grid-gap: 4px;
    grid-template-columns: 40vw 1fr 1fr;
    margin-top: 50px;
    height: calc(100vh - 60px);
}

Answer 2

Если я вас правильно понял (вы sh, что большая плитка составляет 60vh, а маленькая 30vh), просто добавьте:

div {
    min-height: 30vh;
  }

Если это не то, что вам нужно, приведите более подробное описание и примеры.