使用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() 函数，让每个菜单项自动均分容器宽度。
grid-template-columns: repeat(n, 1fr) 是实现等分的关键。其中：
n 表示要划分的列数，比如 4 个菜单项就写 4；1fr 表示每一列占据一个“分数单位”，即剩余空间的等份。例如，有 4 个导航项时：
.nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px; /* 可选：设置项之间的间距 */
}
HTML 结构通常如下：
立即学习“前端免费学习笔记（深入）”；
<nav class="nav"> <a href="#">首页</a> <a href="#">产品</a> <a href="#">服务</a> <a href="#">关于</a> </nav>
CSS 设置：
.nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
}
<p>.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 即可适配不同数量或屏幕尺寸。
基本上就这些，不复杂但容易忽略细节。
以上就是CSS Grid如何实现导航菜单等分排列_grid-template-columns repeat实现的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
704
收藏
