CSS Grid导航栏区域横向偏移、汉堡菜单错位问题排查求助

问题原因及修复方案 #

1. 网格列偏移问题 #

你出现的列偏移是以下两个原因导致：

• 重复定义了.navigation样式：你代码前半部分给.navigation设置了padding: 0，但后面又全局重写了.navigation规则，将padding改为5%，导致导航链接容器被内边距撑宽，超出grid分配的5fr宽度，挤压右侧汉堡菜单区域触发整体偏移。直接删除后面重复的.navigation定义即可。
• 多余的grid-area属性干扰：你给logo、links、menu都加了grid-area属性，但父容器.container没有定义grid-template-areas规则，多余的属性会干扰网格自动排列，删除这些多余的grid-area属性即可。
• 可选补充：给body添加margin: 0规则，清除浏览器默认body外边距，避免默认边距导致的整体布局偏移。

2. 汉堡菜单面包条错位问题 #

你写的汉堡动画transform偏移百分比数值不合理，旋转后坐标轴发生变化，过大的百分比偏移会受元素自身尺寸影响出现错位，直接替换动画规则即可：

/* 关闭状态上下条改用固定像素偏移，更稳定 */
.btn-mid::before {
  transform: translateY(-8px);
}
.btn-mid::after {
  transform: translateY(8px);
}

/* 打开状态动画修正 */
.menu-btn.open .btn-mid {
  background: transparent;
}
.menu-btn.open .btn-mid::before {
  transform: rotate(45deg) translate(4px, 4px);
}
.menu-btn.open .btn-mid::after {
  transform: rotate(-45deg) translate(6px, -6px);
}

数值可根据你的视觉需求微调，不需要使用百分之几百的偏移值即可实现正常的汉堡转叉叉效果，不会出现错位。

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