CSS Grid中间行无法调整尺寸或移动问题求助

问题根源 #

核心问题是HTML结构错误：.features 和 .footer 被嵌套在 .header 内部，而CSS Grid布局仅对容器的直接子元素生效。.container 的直接子元素只有 .header 一个，所以你定义的grid-template-areas、grid-template-rows等规则完全没作用在.features和.footer上——它们只是.header的普通子元素，自然会和header内容重叠，修改行高也不会有任何变化。

修复步骤 #

1. 调整HTML结构：将.features和.footer从.header中移出，作为.container的直接子元素，让Grid容器能识别这三个网格项。
2. 可选优化：如果希望header背景铺满且高度自适应，可把grid-template-rows中的200px改为auto，让header根据内容自动调整高度；如果需要固定高度，保持200px即可。

修改后的完整代码 #

CSS代码 #

body {
  font-family: "inter", sans-serif;
}

.container {
  font-size: 1.3rem;
  width: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: 1fr;
  /* 可根据需求调整行高，auto为自适应，也可保留200px固定高度 */
  grid-template-rows: auto 1fr 80px;
  grid-template-areas:
    "h"
    "feat"
    "foot";
}
.header {
  grid-area: h;
  border: 1px solid rgb(199, 31, 31);
  background: green;
  background-image: url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
  background-size: cover; /* 让背景图铺满容器 */
  background-position: center; /* 让背景图居中显示 */
}

.features {
  grid-area: feat;
  border: 1px solid rgb(16, 192, 68);
}

.footer {
  grid-area: foot;
  border: 1px solid rgb(165, 22, 146);
}

.header,
.features,
.footer {
  padding: 1em;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

nav li {
  list-style: none;
}

nav li a {
  text-decoration: none;
  font-weight: 800;
  color: white;
  opacity: 0.5;
  transition: 0.5s;
}

nav li a:hover {
  opacity: 1;
}

.hero-content img {
  width: 300px;
}

.hero-content{
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/84d2ebe131.js"
      crossorigin="anonymous"
    ></script>

    <title>Coffee Shop</title>
  </head>
  <body>
    <div class="container">
      <!-- Header作为container的直接子元素 -->
      <div class="header">
        <nav>
          <ul>
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">Menu</a>
            </li>
            <li>
              <a href="#">Location</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
            <li class="logo">
              <a href="#">Logo</a>
            </li>
          </ul>
        </nav>
      </div>

      <!-- Features移出header，作为container的直接子元素 -->
      <div class="features">
        <section class="hero-content">
          <figure>
            <img
              src="https://images.unsplash.com/photo-1643552469055-00f36a16def4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
              alt=""
              style="border-radius: 50%"
            />
            <figcaption>Fresh Baked Bread</figcaption>
          </figure>

          <figure>
            <img
              src="https://images.unsplash.com/photo-1514664902876-824dfe29bb64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
              alt=""
              style="border-radius: 50%"
            />
            <figcaption>Home Roasted Coffee</figcaption>
          </figure>

          <figure>
            <img
              src="https://images.unsplash.com/photo-1591538519435-4578c3ba26d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=923&q=80"
              alt="" style="border-radius: 50%;"
            />
            <figcaption>Good Market?</figcaption>
          </figure>
        </section>
      </div>

      <!-- Footer移出header，作为container的直接子元素 -->
      <div class="footer">
        <footer>
          123 Main Street Edwardsville, IL • 555-555-5555 • us@me.com
        </footer>
      </div>
    </div>
  </body>
</html>

额外优化说明 #

• 给.header添加了background-size: cover和background-position: center，让背景图更好地铺满容器，避免拉伸变形。
• 把grid-template-rows的第一个值改为auto，让header根据导航内容自动调整高度，若需要固定200px高度，改回200px即可。

内容的提问来源于stack exchange，提问作者7th Ward