Flex布局下方添加Grid布局异常：内容嵌入Flex区域的解决方法

你遇到的问题核心原因有两点：

• Flex容器的子元素设置了固定height:10rem，但内部图片、文本、链接的总高度超过了这个值，导致内容溢出，覆盖了下方的Grid区域，看起来像是Grid嵌入到Flex里；
• Grid布局仅定义了grid-template-areas，但未给子元素设置对应的grid-area属性，Grid布局未正常生效。

解决方案 #

1. 移除Flex子元素的固定高度，让容器自适应内容高度；
2. 为Grid子元素添加grid-area属性，匹配布局定义；
3. 可选：添加样式优化布局间距和圆角效果，贴合你的需求。

修改后的CSS代码 #

.grid-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-bottom: 4rem;
}

.image1,
.image2,
.image3 {
  margin: 4rem 0 0 0;
  text-align: center; /* 让内容居中更美观 */
}

.image {
  max-height: 10rem; /* 限制图片最大高度，避免过大撑破布局 */
  width: auto;
}

@media (max-width: 800px) {
  .grid-container2 {
    flex-direction: column;
    align-items: center; /* 移动端内容居中 */
  }
}

.text {
  font-family: Merge;
  font-size: large;
}

.link {
  font-family: Merge;
  font-size: small;
  color: black;
}

.grid-container3 {
  display: grid;
  grid-template-areas: 'col1 col2 col3';
  gap: 1rem; /* 列之间添加间距 */
  padding: 0 2rem;
  margin-top: 2rem; /* 和上方Flex区域拉开距离 */
}

.col1 {
  grid-area: col1;
  background-color: #f5f5f5;
  border-radius: 8px; /* 实现你需要的圆角矩形 */
  padding: 2rem;
}

.col2 {
  grid-area: col2;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 2rem;
}

.col3 {
  grid-area: col3;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 2rem;
}

HTML代码（无需修改） #

<div class="grid-container2">
  <div class="image1">
    <img class="image" src="images/Customer Landing Page.jpg" alt="Customer - Make a service request">
    <div class="text">Make a service request</div>
    <a class="link" href="">Sign up as a customer</a>
  </div>
  <div class="image2">
    <img class="image" src="images/Contractor Landing Page 2.jpg" alt="Contractor - Decide on jobs">
    <div class="text">Decide what orders you want to fulfill</div>
    <a class="link" href="">Decide which job suits you best</a>
  </div>
  <div class="image3">
    <img class="image" src="images/Contractor Landing Page.jpg" alt="Contractor or Business - Create account">
    <div class="text">Orders completed by professionals</div>
    <a class="link" href="">Sign up as a business or contractor</a>
  </div>
</div>

<div class="grid-container3">
  <div class="col1">
    1
  </div>
  <div class="col2">
    2
  </div>
  <div class="col3">
    3
  </div>
</div>

内容的提问来源于stack exchange，提问作者user16956594