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

Question

当父级容器为容器时，如何将一个孙级元素中的一个元素跨到CSS Grid中的100％宽度。

.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>

我想要达到的目标是这个。desired layout

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

Answer 1

这里有解决方案

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: #4834d4;
}

.container > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.child_01 {
  display: inline-flex;
  background-color: #f9ca24;
  width: 30%;
  height: 50px;
}

.child_02 {
  display: flex;
  background-color: #eb4d4b;
  width: 100%;
  height: 50px;
  margin: 1rem auto;
}

<div class="container">
  <div>
    <div class="child_01"></div>
    <div class="child_01"></div>
    <div class="child_01"></div>
   </div>
   <div class="child_02"></div>
  <div class="child_02"></div>
  <div class="child_02"></div>
</div>