为什么CSS Grid容器尺寸仅匹配第一列而不占满整行？

问题原因 #

• 悬停触发逻辑错误：你把边框样式绑定在了li和.settings两个子元素上，而非父容器本身，就算父容器占满整行，子元素的边框也无法覆盖整行范围。同时你给li设置了margin: 10px，导致子元素和父容器边缘存在空隙，进一步阻碍了整行边框效果的实现。
• Grid列宽配置不合理：你给两列都设置了固定像素宽度150px 35px，就算父容器设置了width: 100%，内容也只会占用固定的185px宽度，剩余空间全部留白，自然无法撑满整行。
• 无效属性滥用：padding不支持负值，你写的.settings:hover中的padding-right: -160px属于完全无效的属性；同时给li:hover加padding-right: 160px属于硬凑宽度的写法，非常不稳定，还会挤压旁边的齿轮图标位置。

解决方法 #

调整CSS逻辑，把悬停效果绑定到父容器，修改Grid列宽为自适应配置即可，修改后的代码如下：

.project {
  font-family: "Rubik", sans-serif;
  grid-template-areas: "name settings";
  /* 第一列占满剩余空间，第二列固定35px */
  grid-template-columns: 1fr 35px;
  grid-gap: 0px;
  display: grid;
  cursor: pointer;
  width: 100%;
  font-size: 13px;
  /* 把之前li的margin改到父容器的padding，避免内部空隙 */
  padding: 10px;
  box-sizing: border-box;
  /* 加过渡效果更顺滑，可按需删除 */
  transition: all 0.2s ease;
  border-radius: 200px;
  border: 1px solid transparent;
}

/* 整行悬停时加边框 */
.project:hover {
  border-color: currentColor;
}

.project li {
  list-style-type: none;
  grid-area: name;
  /* 删掉原来的margin，保留内部padding */
  padding: 10px;
  margin: 0;
}

.project .settings {
  grid-area: settings;
  text-align: center;
  align-self: center;
  font-size: 18px;
}

修改后无需改动原有JSX代码，即可实现Grid容器占满整行、鼠标悬停任意位置都显示整行边框的效果。

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