使用CSS Grid的repeat()函数可轻松实现导航菜单等分排列。1. 通过grid-template-columns: repeat(n, 1fr)将容器均分为n列，每项自动等宽；2. 搭配gap设置间距，text-align控制对齐；3. 使用auto-fit与minmax(100px, 1fr)实现响应式自适应，无需修改代码即可适配不同屏幕和项目数量。

使用 CSS Grid 实现导航菜单的等分排列非常简单，核心是利用 grid-template-columns 配合 repeat() 函数，让每个菜单项自动均分容器宽度。

基本语法：repeat() 创建等宽列

grid-template-columns: repeat(n, 1fr) 是实现等分的关键。其中：

例如，有 4 个导航项时：

.nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; /* 可选：设置项之间的间距 */
}

实际应用示例

HTML 结构通常如下：

CSS 设置：

.nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.nav a {
padding: 12px 0;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
}

动态适应：自动填充列数

如果希望菜单项数量变化时仍能自适应等分，可以使用 repeat(auto-fit, minmax())：

.nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

这种方式在响应式布局中特别实用，无需修改 CSS 即可适配不同数量或屏幕尺寸。

基本上就这些，不复杂但容易忽略细节。