react-grid-layout如何实现以网格单元而非像素渲染网格线

问题根源 #

当前实现存在两个核心偏差：

• 背景网格的尺寸没有和react-grid-layout的单元格计算规则严格绑定，忽略了布局库默认的margin、padding等间距参数
• 渐变绘制的网格线位置与单元格边界存在1px内的偏移，加上可能的子像素渲染问题，导致对齐误差

具体实现方案 #

1. 统一网格基准单位 #

首先用CSS变量统一定义网格单元尺寸，避免CSS和JS配置数值不一致：

:root {
  --grid-unit: 50px; /* 单个网格的宽高，按需调整 */
  --grid-line-color: #ccc;
}

同时确保react-grid-layout的配置和该单位严格对齐：

• 容器宽度必须是 列数 * --grid-unit 的整数倍，避免出现子像素
• rowHeight 配置值严格等于 --grid-unit 的数值
• 若设置了网格项间距margin，需要将间距值算入背景网格尺寸，比如水平/垂直margin为10px的话，background-size 要改成 calc(var(--grid-unit) + 10px) calc(var(--grid-unit) + 10px)

2. 修正网格线CSS代码 #

.container {
  background-color: red;
  width: 1000px; /* 确保是列数*单个网格宽度的整数倍，比如20列*50px=1000px */
  height: 3000px;
  box-sizing: border-box;
  background-image: 
    /* 水平网格线：每--grid-unit画一条1px线，刚好落在单元格下边界 */
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--grid-unit) - 1px),
      var(--grid-line-color) calc(var(--grid-unit) - 1px) var(--grid-unit)
    ),
    /* 垂直网格线：每--grid-unit画一条1px线，刚好落在单元格右边界 */
    repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--grid-unit) - 1px),
      var(--grid-line-color) calc(var(--grid-unit) - 1px) var(--grid-unit)
    );
  background-size: var(--grid-unit) var(--grid-unit);
  /* 若不需要最外层的边框，可以加下面这行裁剪 */
  /* background-position: -1px -1px; */
}

.react-grid-layout {
  background: none !important;
}

/* 所有网格项统一盒模型，避免内边距/边框撑大盒子 */
.react-grid-item {
  box-sizing: border-box;
}

3. 额外注意事项 #

• 确保页面缩放比例为100%，非100%缩放会导致浏览器子像素渲染误差，出现网格线偏移
• 不要给.container添加额外的border、padding，若必须添加要同步调整background-position抵消偏移
• 若使用响应式布局，每次容器宽度变化后要重新计算确保单个网格宽度为整数像素

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