如何创建具有相等行高的并排响应式CSS Grid容器

Question

我正在尝试使用CSS Grid创建2个并排容器。

我的要求是

• 相邻的行必须是相同的高度，无论是否为中心
• 容器堆栈@ 800px

以下是我拍摄的照片：

以下是我目前拥有的一支笔：Codepen

ul { text-align: left; }

.container { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(auto,auto);
  grid-column-gap: 30px; 
}

.image { 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 275px; 
}

.image1 { background-image: url('https://picsum.photos/500/?image=0') }

.image2 { background-image: url('https://picsum.photos/500/?random') }

.wrapper { 
  display: grid; 
  grid-template-columns: 1fr;
  grid-template-rows: minmax(auto,auto);
}

.child { 
  text-align: center;
  padding: 30px;
  font-size: 20px; 
  color: #fff; 
}

.child:nth-child(2) { background-color: #9590BF; }
.child:nth-child(3) { background-color: #7678ED; }
.child:nth-child(4) { background-color: #F7B801; }
.child:nth-child(5) { background-color: #F18701; }
.child:nth-child(6) { background-color: #F35B04; }

@media(max-width: 800px) {
  .container {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 30px;
  }
}

<div class="container">
  
	<div class="wrapper">
		<div class="image image1"></div>
		<div class="child">Quisque ultricies tempus fringilla. Praesent cursus nibh enim, quis convallis urna molestie vel. Phasellus dictum urna eu massa convallis, vitae rutrum quam gravida cursus nibh enim, quis convallis</div>
		<div class="child">
			<ul>
				<li>List Item</li>
				<li>List Item</li>
				<li>List Item</li>
				<li>List Item</li>
			</ul>
		</div>
		<div class="child">4</div>
		<div class="child">5</div>
		<div class="child">6</div>
	</div>
  
	<div class="wrapper">
		<div class="image image1"></div>
		<div class="child">Smaller Text</div>
		<div class="child">
			<ul>
				<li>List Item</li>
				<li>List Item</li>
			</ul>
		</div>
		<div class="child">4</div>
		<div class="child">5</div>
		<div class="child">6</div>
	</div>
  
</div>

感谢您的帮助！