为什么CSS Grid中设置grid-column: 3的整列表现为可点击按钮？

网格第三列异常的根因及修复方案 #

必改问题

• HTML语法错误：<button>内部的<a>标签未闭合，错误代码为<button class="main_btn"><a href="#">Submit Fund</button>，缺少</a>结束标签，DOM解析异常会直接连带影响后续第三列元素的渲染，修复为<button class="main_btn"><a href="#">Submit Fund</a></button>即可。
• 网格对齐规则缺失：.fund__container没有设置垂直对齐规则，默认align-items: stretch会让所有列高度被最高的子项（第一列表单）拉伸，但你给第二列按钮加了margin-top: 10rem会打乱行高对齐，给.fund__container新增align-items: start属性即可让三列统一从顶部开始排列：

.fund__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start; /* 新增属性 */
}

• 第三列宽度适配错误：.row_fund-frame设置了justify-self: center，会让第三列容器宽度收缩到内容宽度，不会铺满网格列，改为justify-self: stretch即可让第三列占满整列宽度，背景也能正常铺满：

.row_fund-frame {
  background: #fff;
  grid-column: 3;
  justify-self: stretch; /* 把center替换为stretch */
}

• 第三列内部列表默认边距未重置：<ol>标签默认自带左侧内边距，会导致内容偏移，新增如下样式即可让列表内容正常对齐：

.row_fund-frame ol {
  padding-left: 0;
  list-style-position: inside;
}

可选修复的连带问题

• .label、.label_title的字体颜色设置为#fff白色，但父容器.row_user背景为白色，会导致第一列的标签文字完全不可见，建议改为深色文字。
• .row_fund-frame设置的height: 100%无实际作用，因为父元素.fund__container没有显式定义高度，可以删除该属性避免不必要的布局影响。
• 你排查的cursor: pointer仅在.main_btn上定义，属于正常按钮样式，和第三列异常无关联。

内容的提问来源于stack exchange，提问作者AustinNoyes-Business