如何获取dense自动排布的CSS Grid中各子项的实际网格区域位置

解决方案 #

你可以直接使用浏览器原生提供的 window.getComputedStyle() API 读取每个网格子项的最终渲染属性，即使是 dense 规则自动填充、动态生成的子项也能拿到准确的网格位置信息。
需要读取的四个核心属性如下：

• gridRowStart：子项实际占据的起始行号
• gridRowEnd：子项实际占据的结束行号，行跨度可通过 结束行号 - 起始行号 计算得到
• gridColumnStart：子项实际占据的起始列号
• gridColumnEnd：子项实际占据的结束列号，列跨度可通过 结束列号 - 起始列号 计算得到

可直接运行的示例代码 #

const gridContainer = document.querySelector('.grid');
const gridItems = gridContainer.querySelectorAll('.item');

gridItems.forEach((item, idx) => {
  const computed = getComputedStyle(item);
  const position = {
    起始行: Number(computed.gridRowStart),
    结束行: Number(computed.gridRowEnd),
    行跨度: Number(computed.gridRowEnd) - Number(computed.gridRowStart),
    起始列: Number(computed.gridColumnStart),
    结束列: Number(computed.gridColumnEnd),
    列跨度: Number(computed.gridColumnEnd) - Number(computed.gridColumnStart)
  };
  // 这里可以按需处理位置信息，示例为打印到控制台
  console.log(`子项${idx + 1}的网格位置信息：`, position);
});

补充说明 #

如果你需要基于像素位置做额外的计算，也可以结合getBoundingClientRect()获取容器和子项的像素坐标，除以单元格尺寸得到网格坐标。但直接读取计算后的网格属性是兼容性最好、准确率最高的方案，不受单元格尺寸调整、自动轨道生成等场景的影响。

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