CSS Grid布局问题：让.items内<li>居中且hover占满网格列

我明白你的需求：想让.items里的每个<li>既居中显示，又能填满对应的网格单元格，这样鼠标悬停时整个网格列都会变色。之前用justify-items和align-items导致异常，核心问题是这些属性只会让元素在单元格内居中，但元素本身并没有占满单元格的宽高，所以悬停时只有元素内容区域变色，而非整个网格列。

下面是调整后的完整代码，我会一步步解释关键修改点：

修改后的CSS代码 #

.navbar{ 
  display: grid; 
  background: #000; 
  grid-template-columns: 3fr 1fr; 
} 
.brand{ 
  justify-self: start; 
  padding: 1em; 
  font-weight: 800; 
  font-size: 1.2em; /* 修正笔误：原代码写的font-style，应该是font-size */
} 
.items{ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); /* 简化重复列的写法 */
  /* 移除了错误的grid-template属性：原代码的grid-template:1fr auto会覆盖列设置，这里不需要行定义可以删掉 */
} 
.navbar li{ 
  list-style-type: none; 
  /* 让li占满网格单元格的高度，同时内部内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
} 
.navbar a{ 
  color: white; 
  text-transform: uppercase; 
  text-decoration: none; 
  padding: 1em; /* 将padding从li移到a上，扩大点击区域 */
  width: 100%; /* 让a占满li的宽度，确保整个区域可点击 */
  text-align: center; /* 保证文字水平居中 */
} 
.navbar li:hover{ 
  background: white; 
} 
.navbar li:hover>a{ 
  color: black; 
}

关键调整说明 #

1. 修正笔误：把.brand里的font-style改成font-size，不然字号设置不会生效。
2. 让li填满网格单元格：给.navbar li添加height:100%，结合Grid默认的align-items: stretch（单元格高度拉伸），li会自动填满整个网格行的高度；宽度方面，因为.items的列是1fr，li默认就会占满列宽。
3. 内部内容居中：给li设置display:flex+justify-content:center+align-items:center，让里面的<a>标签在li内部完美居中，同时不影响li填充整个网格单元格。
4. 优化点击体验：把padding从li移到a标签上，这样不仅文字周围有间距，整个li区域都能被点击，同时保证悬停时整个网格列的背景色变化。

这样调整后，你就能实现「列表项居中显示，悬停时整个网格列变色」的效果了。

内容的提问来源于stack exchange，提问作者A Rogue Otaku