相关疑难解决方法(0)

有没有办法在 JavaScript 中动态检测 CSS 网格中元素所在的网格列和行？

我有一个网格，我设置了三个断点，使其具有 4、3 或 2 列。

我想要做的是，如果用户单击某个单元格，则将单元格中的新元素立即动态覆盖到被单击的单元格的右侧，除非它位于最右侧的列中，在这种情况下，覆盖元素将进入左侧的单元格。

我知道我可以使用grid-column和grid-row来指定我想要放入新内容的单元格，但为了能够使用它，我需要知道被单击的单元格的列和行。

我怎样才能动态地确定这一点？

假设我有一个 3 列的 CSS 网格。有没有一种方法，使用JavaScript，以获得grid-row和grid-column自动放置元素？

例子：

console.log($('#test').css('grid-row'), $('#test').css('grid-column'));
// expected output: 2 3 
// actual output: two empty strings

.grid {
  display: grid;
  grid-template-columns: repeat( 3, 1fr);
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="test"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是示例的 JSFiddle：https ://jsfiddle.net/w4u87d2f/7/

在这个例子中，我可以通过计算元素并知道网格有三列来计算：

grid-column = $('#test').index() % 3 + 1;
grid-row = Math.ceil( $('#test').index() / 3 )

但这仅适用于非常简单的网格，也意味着我必须考虑更改列数的断点。

编辑：这不是Retrieve the position (X,Y) of an HTML element的副本，因为我对像素坐标不感兴趣，但对 CSS-Grid 中的行号和列号不感兴趣。