使用Grid布局可高效构建响应式分页组件，通过grid-template-columns定义结构与minmax()控制列宽，结合gap统一间距，实现对齐整齐、适配多端的分页界面。
在现代前端开发中，Grid 布局已成为构建复杂分页组件的首选方式。通过 grid-template-columns 与 gap 的合理搭配，可以轻松实现响应式、对齐整齐且语义清晰的分页界面。
使用 grid-template-columns 定义分页结构
分页组件通常包含“上一页”、“页码按钮”、“下一页”以及可能的省略号占位符。利用 grid-template-columns 可以精确控制每一项的宽度和分布。
例如：设定固定列宽或灵活比例，使中间页码区域自适应，两侧按钮保持紧凑。
- 使用 minmax() 函数确保页码按钮最小宽度，避免挤压变形
- 用 1fr 分配剩余空间给页码区，两端按钮设为固定宽度（如 60px）
- 针对不同屏幕尺寸调整列定义，实现响应式布局
示例代码：
立即学习“前端免费学习笔记（深入）”；
.pagination {
display: grid;
grid-template-columns: 60px repeat(5, minmax(40px, 1fr)) 60px;
gap: 8px;
}
gap 属性优化间距一致性
gap 能统一设置行与列之间的间隔，替代传统 margin 带来的计算复杂度。
- 避免子元素外边距叠加问题，布局更稳定
- 配合 padding 控制容器内边缘留白
- 在移动端可减小 gap 值以节省空间，桌面端适当放大提升点击体验
当页数较多需动态省略时，可将“...”作为独立网格项插入，由 Grid 自动对齐，无需额外定位。
响应式断点下的模板调整
不同设备应采用不同的列数与排列方式。
- 手机端：减少显示页码数量，使用 repeat(auto-fit, ...) 自适应换行
- 平板或桌面端：展开更多页码，保持单行布局
- 结合 @media 动态修改 grid-template-columns 与 gap
示例响应式配置：
@media (max-width: 768px) {
.pagination {
grid-template-columns: 50px repeat(3, 1fr) 50px;
gap: 4px;
}
}
基本上就这些。合理运用 grid-template-columns 与 gap，能让分页组件既简洁又强大，无需浮动或绝对定位，维护成本更低。
