为何给CSS Grid子元素添加父容器后网格布局失效？

问题根源 #

你给中间组的input、button等元素套了<div class="i01">后，这个div就成了.grid-container的直接子元素，而原来的.item3、.item4这些grid-column/grid-row属性是加在div内部的元素上的。但CSS Grid的定位规则只对grid容器的直接子元素生效，div内部的元素不再受外层grid布局控制，所以才会出现布局混乱的情况。

修复方案 #

这里提供两种可行的修复思路：

方案一：给组容器设置Grid定位，内部嵌套子Grid #

这种方法保留你包裹组的思路，同时让组容器和内部元素都符合Grid布局规则：

1. 让每个组容器作为外层Grid的直接子元素，占据对应行的全部列；
2. 给组容器设置子Grid，继承外层的列宽和间距，保证内部元素排列和其他组一致。

修改后的代码如下：

HTML

<span>
    <div class="grid-container">
        <!-- 第一组包裹容器 -->
        <div class="i01 grid-group">
            <input class="grid-item-input input" type="text" id="linkKBs" maxlength="" value="" autocomplete="off" autofocus>
            <span class="placeholder1">My Guinea Pigs:</span>
            <span class="placeholder2">Search for Guinea Pig:</span>
            <button class="grid-item-BT" tabindex="-1">SEARCH</button>
        </div>
        
        <!-- 第二组包裹容器 -->
        <div class="i02 grid-group">
            <input class="grid-item-input input" type="text" id="linkInc" maxlength="" value="" autocomplete="off">
            <span class="placeholder3">My Bananas:</span>
            <span class="placeholder4">Search for Banana:</span>
            <button class="grid-item-BT" tabindex="-1">SEARCH</button>
        </div>
        
        <!-- 第三组包裹容器 -->
        <div class="i03 grid-group">
            <input class="grid-item-input input" type="text" id="linkAAChan" maxlength="" value="" autocomplete="off">
            <span class="placeholder5">My Comic Books:</span>
            <span class="placeholder6">Search Comic Book:</span>
            <button class="grid-item-BT" tabindex="-1">SEARCH</button>
        </div>
    </div>
</span>

CSS（关键修改部分）

.grid-container {
  display: grid;
  width: auto;
  height: auto;
  gap: 12px 6px;
  padding: 0px;
  grid-template-columns: 200px 60px;
  grid-template-rows: 40px 40px 40px;
}

/* 新增：组容器的Grid配置 */
.grid-group {
  grid-column: 1 / -1; /* 占据当前行的全部列 */
  display: grid;
  grid-template-columns: inherit; /* 继承外层的列宽设置 */
  gap: inherit; /* 继承外层的列间距 */
}

/* 调整内部元素的定位：只需要指定列，行由子Grid自动处理 */
.grid-item-input {
  grid-column: 1;
  /* 原有样式保持不变 */
  background-color: #313131;
  left: 10px;
  font-size: 11pt;
  top: 5px;
  padding: 0px 10px;
  padding-top: 3px;
  border: solid 1px #494949;
  border-radius: 7px;
}

.grid-item-BT {
  grid-column: 2;
  /* 原有样式保持不变 */
  position: relative;
  top: 1px;
  background: linear-gradient(0deg, #303030, transparent) #505050;
  color: #acacac;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 14px;
  border: 0px solid #666666;
  border-radius: 9px;
}

/* 动画类保持不变 */
.i01 {
  animation: fade-in-item 0.4s 0.0s ease-in-out forwards;
}

.i02 {
  animation: fade-in-item 0.4s 0.15s ease-in-out forwards;
}

.i03 {
  animation: fade-in-item 0.4s 0.3s ease-in-out forwards;
}

@-webkit-keyframes fade-in-item {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 其他原有样式（如placeholder动画）保持不变 */

方案二：无需包裹容器，给组内元素批量加动画类 #

如果只是要实现整组同步淡入，也可以不用额外包裹div，直接给同一组的所有元素添加相同的动画类，通过一致的延迟时间实现同步效果：

• 给第一组的input、button、placeholder都加i01类；
• 第二组都加i02类；
• 第三组都加i03类。

这种方法完全保留原有Grid布局结构，不需要修改任何定位规则，只需要调整元素的类名即可。

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