为什么CSS Grid的grid-row属性设置后不生效？

核心问题原因 #

• 未给网格容器设置行高规则
  你仅定义了12列的网格布局，没有设置grid-template-rows或grid-auto-rows。当给p元素指定grid-row: 3时，网格会自动创建前2个隐式空行，但无内容的行默认高度为auto（即高度为0），因此文本视觉位置和放在第1行完全没有差异，会让人误以为属性未生效。
• 跨容器布局不生效
  你要实现「VOOGLE标识在输入框上方」的效果，前提是两个元素属于同一个网格容器。但你提供的代码里输入框并未被放进.voogle容器内，跨容器的grid-row属性完全无法作用到其他容器的元素上，自然达不到调整位置的效果。

修复方案 #

验证grid-row是否生效 #

如果要直观看到grid-row:3的效果，只需要给.voogle容器添加隐式行高度规则即可：

.voogle {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* 新增：给自动创建的行设置统一高度 */
  grid-auto-rows: 100px;
}

此时文本会向下偏移200px（前2行各占100px高度），即可看到grid-row属性已正常生效。

实现Logo在输入框上方的布局 #

首先把输入框移入同一个网格容器，再分别给两个元素指定布局位置：
修改后的HTML：

<div class="voogle">
  <p class="voogle-logo">
    <span class="V">V</span><span class="O">O</span><span class="O">O</span>
    <span class="G">G</span><span class="L">L</span><span class="E">E</span>
  </p>
  <!-- 将输入框移入网格容器 -->
  <input type="text" class="search-input">
</div>

修改后的CSS：

.voogle {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 20px; /* 给两个元素之间添加间距 */
}

.voogle-logo {
  grid-column: 5/9;
  grid-row: 2;
  text-align: center;
  font-size: 48px;
  margin: 0;
}

.search-input {
  grid-column: 4/10;
  grid-row: 3;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  padding: 0 16px;
}

如果不需要预留顶部空白，甚至不需要手动设置grid-row：网格默认自动流会按DOM顺序上下排列元素，仅设置列位置即可实现上下布局。

补充：如果不需要复杂的列对齐逻辑，这种简单的上下布局用Flex实现会更简便，不需要手动指定行位置。

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