CSS Grid布局主内容区与页脚左对齐异常问题排查求助

问题根因及修复方案 #

1. 最直接的错误：类名拼写错误 #

你CSS中定义的左侧内容选择器是.gridconentleft，少写了一个字母t，和HTML里的gridcontentleft类名不匹配，导致grid-column: 2规则没有生效，图片所在容器默认处于网格第一列，自然无法和footer第二列的蓝色区块对齐，修正即可：

/* 错误写法 */
.gridconentleft {
    grid-column: 2;
}
/* 修正后 */
.gridcontentleft {
    grid-column: 2;
}

2. 补充修复：统一盒模型规则 #

两个网格容器.gridcontent和.pagefooter都设置了0.25em的边框，如果没有全局配置box-sizing: border-box，边框会被计算在容器宽度之外，导致两个网格的实际可用宽度不一致，也会引发对齐偏移，建议在CSS开头添加全局盒模型声明：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3. 其他可选优化点 #

• 你代码中.pagefootercontact的text_align: left是错误属性名，正确写法为text-align: left
• 两个网格的列规则完全一致，建议提取为公共类，避免后续修改出现配置不一致的问题

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