如何在CSS Grid中将孙子元素之一扩展到100％的宽度

由 发布于

当父容器为容器时，如何在CSS Grid中将孙子元素之一跨度为100％宽度分为3个部分。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.container > div {
  background-color: #4834d4;
  width: 100%;
}
.container > div .child_01 {
  background-color: #f9ca24;
  width: 80%;
  height: 50px;
  margin: 1rem auto;
}
.container > div .child_02 {
  background-color: #eb4d4b;
  width: 80%;
  height: 50px;
  margin: 1rem auto;
}
<div class="container">
	<div>
		<div class="child_01"></div>
		<div class="child_02"></div>
	</div>
	<div>
		<div class="child_01"></div>
		<div class="child_02"></div>
	</div>
	<div>
		<div class="child_01"></div>
		<div class="child_02"></div>
	</div>
</div>

What I am trying to achieve is this.desired layout

是否有可能在CSS Grid中实现。