Как охватить один из элементов внука до 100% ширины в CSS сетке

Question

Как растянуть один из дочерних элементов до 100% ширины в CSS Сетка, когда родительский элемент является контейнером, делится на 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>

Я пытаюсь достичь следующего. желаемый макет

Возможно ли это достичь в CSS Сетка.

Answer 1

Вот вам go с решением

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

Я использую flex вместо сетки.