如何修改CSS Grid网格行之间的垂直间距？

嘿，我瞅了你的代码，立马发现几个导致垂直间距没生效的关键问题，咱们一步步来修复：

问题根源拆解 #

1. 外层网格行定义不匹配
   你的.wrapper设置了grid-template-rows: 1fr;，但grid-template-areas明明包含4行区域（header、menu/content行、menu/content行、footer），这就导致网格实际只有1行，垂直方向根本没有多余的轨道来产生间距。

2. 重复的.content类定义
   你写了两个.content CSS规则，后面的规则直接覆盖了前面的，把之前设置的display: grid、grid-template-rows这些关键属性冲掉了，内部的网格布局直接失效，自然看不到垂直间距。

3. 元素margin与grid gap的混淆
   .header、.menu这些子元素都加了margin: 10px，这会让你误以为是grid gap在生效，但其实grid gap是网格轨道之间的间距，元素自身的margin会干扰你对gap效果的判断。

修正后的完整代码 #

CSS部分 #

.wrapper {
  background-color: #1c1c1c;
  border: solid black 1px;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  display: grid;
  /* 用gap替代grid-gap，更通用的属性 */
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* 匹配grid-template-areas的4行：header高度自适应，中间两行用1fr，footer自适应 */
  grid-template-rows: auto 1fr 1fr auto;
  grid-template-areas:
    'header header header header header'
    'menu content content content content'
    'menu content content content content'
    'footer footer footer footer footer';
}

.header {
  grid-area: header;
  border: solid white 1px;
  background-color: #3a3a3a;
  /* 去掉margin，用grid gap控制间距避免冲突 */
}

.menu {
  grid-area: menu;
  border: solid white 1px;
  background-color: #3a3a3a;
  /* 去掉margin */
}

/* 合并重复的.content类，保留网格布局属性 */
.content {
  list-style: none;
  grid-area: content;
  border: solid white 1px;
  background-color: #3a3a3a;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 5px;
  overflow-y: scroll;
  padding: 10px;
  /* 去掉margin避免冲突 */
}

.footer {
  grid-area: footer;
  border: solid white 1px;
  background-color: #3a3a3a;
  /* 去掉margin */
}

.menu-item {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border: solid white 1px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.madeby {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.top {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.cell {
  border: solid white 1px;
  color: white;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  height: 20px;
  line-height: 20px;
  background-color: #1e1e1e;
}

HTML部分 #

<div class="wrapper">
  <div class="header">
    <div class="top">header</div>
  </div>
  <div class="menu">
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
  </div>
  <div class="content">
    <input class="cell" type="text" value="dato">
    <input class="cell" type="text" value="nøkkelvaner">
    <input class="cell" type="text" value="oppsumering">
    <input class="cell" type="text" value="oppgaver">
    <input class="cell" type="text" value="andre">
    <input class="cell" type="text" value="dato">
    <!-- 多添加几个cell，能更直观看到垂直间距效果 -->
    <input class="cell" type="text" value="test">
    <input class="cell" type="text" value="test">
    <input class="cell" type="text" value="test">
  </div>
  <div class="footer">
    <div class="madeby">footer</div>
  </div>
</div>

关键修改点总结 #

• 修正.wrapper的grid-template-rows，确保和grid-template-areas的行数匹配，让垂直方向有轨道产生gap间距。
• 合并重复的.content类，保证内部网格布局的属性不被覆盖。
• 替换grid-gap为gap（两者功能完全一致，但gap是CSS Grid和Flexbox通用的标准属性，更推荐使用）。
• 移除子元素的margin，避免和grid的gap效果混淆，让gap真正控制网格轨道之间的间距。

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