时间戳

首页 > 解决方案 > 如何在 CSS Grid 中将孙元素之一跨越到 100% 宽度

html - 如何在 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>

我想要达到的就是这个。所需的布局

这有可能在 CSS Grid 中实现吗？

标签： htmlcsscss-grid

解决方案

给你一个解决方案

.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 而不是网格。

推荐阅读