像检查器一样可视化CSS网格计算的状态

Question

我正在为新的display：grid css功能创建一个学习工具。 我遇到了以内联方式可视化创建的网格的需求，这与在chrome的检查工具中可视化网格的方式类似，但是没有使用它。

我目前找不到在给定状态下对计算网格的位置和大小进行采样的方法。我尝试过的部分解决方案是使用以下方法创建临时div：

 tempDiv = document.createElement("DIV");
 tempDiv.style.width = "100%";
 tempDiv.style.height = "100%";
 gridContainer.appendChild(tempDiv);

然后测量像这样定位的每个单元格（即第一行和第一列）：

 tempDiv.gridArea = "1 / 1 / 2 / 2"

并使用以下方法获取位置和大小：

 templDiv.getBoundingClientRect()

在我意识到在很多情况下添加此临时DIV会真正改变网格布局之前，它看起来很有希望。

是否有一些js API可以检索此信息？ 谁能想到一种更聪明的方法？

Answer 1

  

在我意识到在很多情况下添加此临时DIV会真正改变网格布局之前，它看起来很有希望。

我认为您可以通过在position: relative上设置gridContainer，然后绝对定位div来避免这种情况：

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;