有没有一种方法可以使用javascript检测元素所在的CSS网格列和行？

在CSS网格中，有没有一种方法可以在javascript中动态检测元素所在的网格列和网格行

我用三个断点设置了一个网格，这样它就可以有4列、3列或2列

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

我知道我可以使用

grid column

和

grid row

指定要将新内容放入的单元格，但为了能够使用它，我需要知道单击的单元格的列和行

---

我如何动态地确定它？

这里。将其绑定到单击，但您可以以任何方式访问此函数。单击块以查看它是否是最后一列。该函数接受当前的

网格模板列

，因此它将在任何断点上工作

//为div=grid的任何子div添加单击事件
$（文档）.ready（函数（）{
$（'.grid'）。在（'click'，'div'，函数（e）{
GetGridElementsPosition（$（this）.index（），$（this））；//传入单击的div的索引
});
});
函数GetGridElementsPosition（索引，元素）{
//从类grid的css中获取css属性grid模板列
//在空格上拆分并获得长度，这将为您提供多少列
const colCount=$（'.grid'）.css（'grid-template-columns'）.split（''）.length；
const colPosition=索引%colCount；
const rowPosition=数学层（索引/列计数）；
/*确定它是否是最后一列*/
if（colPosition==（colCount-1））{
$（element.html（'row:'+rowPosition+'.col:'+colPosition+'.Last column'）；
}否则{
$（element.html（'row:'+rowPosition+'.col:'+colPosition+'.Not last column'）；
}
}

.grid{
显示：网格；
网格模板列：重复（3，1fr）；
网格行间距：1米；
栅柱间隙：1米；
}
.grid分区{
高度：2米；
背景：蓝色；
颜色：#fff；
}

有趣的是，这个解决方案对您有帮助吗？我最终不必做我所描述的事情，我设置网格项来执行“卡片翻转”类动画，以使附加元素与单击的内容保持在同一网格单元中。但是键

$（'.grid'）.css（'grid-template-columns'）.split（''.length

）正是我想要的。