移除div后CSS Grid布局内hr分隔线消失该如何解决

你为网格容器硬编码了4列布局规则 grid-template-columns: auto auto 1fr auto，网格子元素默认按DOM顺序依次填充列位：

• 存在.btn-container时，4个子元素刚好填满4列：按钮容器占第1列、结果统计p标签占第2列、hr占第3列（1fr弹性宽度，可正常撑开）、排序表单占第4列，分隔线正常显示
• 移除.btn-container后只剩3个子元素，元素会按顺序填充前3列：p标签占第1列、hr占第2列（auto宽度，hr本身无内容，宽度直接坍缩为0）、表单占第3列（1fr弹性宽度），最终分隔线消失。

这个横向排列、中间分隔线自动撑满剩余空间的场景，用Flex布局实现更简单，天然适配左侧元素数量变化的情况，不需要写死列数：

.iqalJN{
  display: flex;
  align-items: center;
  margin-bottom: 2rem; 
  gap: 2rem; /* 统一控制所有子元素的间距，替代原grid的column-gap */
}
.btn-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
}
hr{ 
  flex-grow: 1; /* 核心：让hr自动占据所有剩余横向空间 */
  border: none;
  border-top: 1px solid black;
}

修改后效果完全符合需求：

• 存在.btn-container时，元素按顺序排列为：按钮容器 → 结果统计p → 分隔线 → 排序表单
• 移除.btn-container后，元素自动排列为：结果统计p（靠左作为首个元素）→ 分隔线（正常撑满显示）→ 排序表单
  不需要修改任何HTML结构。

如果你必须保留Grid布局，也可以通过固定表单列位置实现，但代码冗余度更高，优先推荐Flex方案。

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