html - grid css 两个div的高度不相等

Question

我正在制作一个 html css 网站，但是第二个 div 的高度与第一个 div 不相等这是代码:

html 部分:这里有两个 div，主图像 div 和 thirdDiv div

<div class="container">
<div class="header">
    <div class="mainImage">
<img src="https://images.pexels.com/photos/3377538/pexels-photo-3377538.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    </div>
    <div class="ThirdDiv">
        <div class="firstImage">
  <img src="https://images.pexels.com/photos/3377538/pexels-photo-3377538.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        </div>
        <div class="secondImage">
     <img src="https://images.pexels.com/photos/3377538/pexels-photo-3377538.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        </div>

    </div>
</div>

</div>

CSS 部分:

.mainImage {
    height: 100%;
    width: 100%;
}
.mainImage img {
max-height:100% ;
width: 100%;
}
.header {
    display: grid;
    grid-template-columns: 70% 30%;
    height: 400px;
    grid-row-gap :0.5rem;
   grid-column-gap: 0.5rem;
    margin-left: 1rem;
     margin-right: 1rem;
}
.ThirdDiv {
display: grid;
grid-template-rows: 50% 50%;
grid-row-gap :0.5rem;

}
.firstImage {
height: 100%;
width: 100%;
}
.firstImage img {
max-height:100% ;
width: 100%;
}
.secondImage {
height: 100%;
width: 100%;
}
.secondImage img {
max-height:100% ;
width: 100%;
}

https://codepen.io/belscode/pen/gObWMwz

Answer 1

将 .header 和 .ThirdDiv 样式替换为下一个:

.header {
    display: grid;
    grid-template-columns: 70% 30%;
    height: 400px;
    grid-row-gap :2%;
    grid-column-gap: 0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}
.ThirdDiv {
    display: grid;
    grid-template-rows: 49% 49%;
    grid-row-gap :2%;
}