CSS Grid 布局分页组件可实现居中对齐、响应式与结构清晰。1. 使用 place-content: center 居中按钮，auto-fit 自动换行；2. 网格线命名固定首页末页，1fr 列弹性填充中间页码；3. 媒体查询控制小屏下页码显示，隐藏非关键项并用“...”占位；4. 当前页高亮结合 tabindex 支持键盘导航，提升可访问性。Grid 减少嵌套，提升维护效率。
使用 CSS Grid 布局分页组件，可以轻松实现对齐、响应式和结构清晰的效果。相比传统浮动或 Flexbox，Grid 在处理多元素对齐和复杂布局时更具优势，尤其适合分页这类需要居中、等宽或自适应的场景。
1. 居中对齐分页按钮
分页组件通常需要水平居中显示。通过 Grid 容器设置居中对齐，代码简洁且兼容性好。
示例：
.pagination {
display: grid;
place-content: center;
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(36px, auto));
padding: 16px;
}
说明： place-content: center 同时处理主轴与交叉轴居中。repeat(auto-fit, minmax(36px, auto)) 让按钮在空间允许时自动换行，保持最小宽度。
2. 固定位置：首页/末页 + 弹性中间页码
当希望“首页”和“末页”固定在两端，中间页码自动填充时，Grid 的网格线命名非常实用。
立即学习“前端免费学习笔记（深入）”；
.pagination {
display: grid;
grid-template-columns: 60px 1fr 60px;
gap: 8px;
align-items: center;
}
.btn-first { grid-column: 1; }
.btn-pages { grid-column: 2; }
.btn-last { grid-column: 3; }
说明： 使用 1fr 中间列自动伸缩，确保内容区域充分利用空间。配合 justify-self 或内层嵌套 Grid 控制页码对齐方式。
3. 响应式页码折叠（如显示 ...）
在小屏幕上隐藏部分页码，用“...”代替。Grid 可结合类名控制显隐，同时保持布局稳定。
技巧：- 为省略项添加固定尺寸，避免布局跳动
- 使用
@media配合grid-column控制显示数量 - 给关键页码（如当前页前后）高优先级显示
@media (max-width: 480px) {
.pagination {
grid-template-columns: repeat(5, 1fr);
}
.page-dots, .page-num:not(.current):not(.near-current) {
display: none;
}
}
4. 当前页高亮与键盘导航支持
Grid 不影响语义结构，可结合 tabindex 和焦点样式提升可访问性。
- 每个页码使用
或带 role 的元素 - 利用
justify-self: center让当前页在网格中突出 - 用 CSS 变量统一控制尺寸与颜色，便于主题切换
.current {
background: #007cba;
color: white;
justify-self: stretch;
border-radius: 4px;
}
基本上就这些。CSS Grid 让分页布局更灵活，减少额外包装元素，提升维护效率。关键是合理定义网格轨道与响应断点，兼顾美观与可用性。不复杂但容易忽略细节。
