如何让Grid导航栏hover列铺满视口且不挤压其他列？

你可以通过让hover的导航项脱离Grid布局流，结合绝对定位来实现需求，具体修改如下：

修改后的CSS代码 #

.sticky {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: sticky;
  top: 0;
  overflow: hidden;
  /* 设置为相对定位，作为内部绝对定位元素的基准 */
  position: relative;
}

.sticky > div {
  padding: 1rem;
  transition: all 0.3s ease;
  /* 相对定位确保层级控制生效 */
  position: relative;
}

.sticky > div:hover {
  /* 脱离Grid布局流，绝对定位铺满视口 */
  position: absolute;
  left: 0;
  right: 0;
  width: 100vw;
  /* 提高层级，完全覆盖其他导航项 */
  z-index: 10;
}

/* 给不同导航项自定义背景色（示例） */
.colorblock1 { background-color: #f0f0f0; }
.colorblock2 { background-color: #e0e0e0; }
.colorblock3 { background-color: #d0d0d0; }
.colorblock4 { background-color: #c0c0c0; }
.colorblock5 { background-color: #b0b0b0; }

关键逻辑说明 #

• 给.sticky添加position: relative，让hover状态的导航项能以导航容器为基准定位。
• hover时将导航项设为position: absolute，通过left:0和right:0强制铺满视口宽度，此时元素脱离Grid布局，不会挤压其他列。
• z-index:10确保hover的导航项处于最上层，完全覆盖其他导航列。
• transition属性实现平滑的hover过渡效果，避免样式突变。

内容的提问来源于stack exchange，提问作者William B.