如何实现左右分栏网格分页展示75行数据集？

1. 基础布局实现（CSS层） #

用CSS Grid快速实现左右分栏的等高布局：

• 外层容器设置 display: grid; grid-template-columns: 1fr 1fr; height: 100vh; gap: 0;，这样左右两个网格项自动各占50%宽度、100%高度，且高度强制对齐。
• 每个网格内部（左右区域）用统一容器包裹内容，比如<div class="grid-column">，内部行元素（如<div class="row">）设置统一样式：固定行高（如height: 40px;）、一致的内边距和行高，确保左右行的视觉高度完全匹配。

2. 数据分片与分页状态管理 #

• 先把75行数据拆成3个固定长度的数组：groupA = 前25行、groupB = 中间25行、groupC = 最后25行。
• 维护一个分页状态变量（比如currentPage），初始值为1：
  • 当currentPage === 1时，左网格渲染groupA，右网格渲染groupB；
  • 当currentPage === 2时，左网格渲染groupC，右网格渲染25个空的占位行（用和正常行一样的样式类），保证右侧高度和左侧一致，行对齐不失效。

3. 行对齐的关键细节 #

• 不管右侧有没有数据，都要渲染和左侧行数相同的行元素（空行也要保留结构），不能直接让右侧容器为空，否则会因为内容高度不足导致左右高度错位。
• 空行可以用透明占位符（比如<div class="row">&nbsp;</div>），但必须继承正常行的所有样式，确保行高、边距完全一致。

4. 分页交互逻辑 #

• 实现分页切换按钮（上一页/下一页），点击时更新currentPage的值：
  • 当currentPage从1切换到2时，替换左网格内容为groupC，右网格替换为空行；
  • 当currentPage从2切换回1时，恢复左右网格的原始数据组。
• 原生JS场景直接操作DOM替换网格内的行元素；框架（React/Vue）场景通过状态驱动视图更新即可。

内容的提问来源于stack exchange，提问作者Chris Davis