使用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) 是实现等分的关键。其中：
n 表示要划分的列数，比如 4 个菜单项就写 4；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));
}
auto-fit 允许浏览器自动计算可容纳的列数；minmax(100px, 1fr) 表示每列最小 100px，最大占 1fr 空间。这种方式在响应式布局中特别实用，无需修改 CSS 即可适配不同数量或屏幕尺寸。
基本上就这些，不复杂但容易忽略细节。
