Javascript 如何知道子元素在css网格容器中的位置？

假设我们有这样的html结构：

<div id="parent" style="display: grid; grid-template-columns: auto auto">
    <div id="first"></div>
    <div id="second"></div>
</div>

#第一种样式是不确定的，这意味着它的样式可能类似于：

格构柱：1跨2；网格行：1跨2

如果是这样，#second将位于第3行第1列

---

我们是否有一个通用的方法来知道#second位于哪一行和哪一列上？

我认为没有这样的方法。您可以使用

getComputedStyle

获得

#first

的样式，但是

#second

的样式是完全隐式的，必须根据已知的样式在您这边进行计算。最好的方法可能是通过明确设置来了解每个元素的每个位置。我不确定我是否理解您在这里提出的问题。如果只是寻找CSS，您可以使用

网格模板区域决定顺序和布局

@RoniLaukkarinen我正在编写一个Vue组件，它是一个网格容器。我将内容完全留给组件用户。我希望该组件能够具有最大的灵活性，以便用户可以根据自己的需要放置元素。用户将或不会在组件上应用

网格模板区域

。我现在可以做的是使用

window.getComputedStyle（parent）.getPropertyValue（'grid-template-columns'）

和

window.getComputedStyle（parent）.getPropertyValue（'grid-template-rows'）

来了解我的网格的基本结构。但我无法确定其中一个子项的哪个曲目是打开的。@sjahan我还试图访问

window.getComputedStyle（第二个）.getPropertyValue（'grid-column'）

和

window.getComputedStyle（第二个）.getPropertyValue（'grid-row'）

。两者都返回

auto/auto

。也许，正如你所建议的，现在唯一的解决办法就是对孩子们明确表态。我不认为有这样的事情。您可以使用

getComputedStyle

获得

#first

的样式，但是

#second

的样式是完全隐式的，必须根据已知的样式在您这边进行计算。最好的方法可能是通过明确设置来了解每个元素的每个位置。我不确定我是否理解您在这里提出的问题。如果只是寻找CSS，您可以使用

网格模板区域决定顺序和布局

@RoniLaukkarinen我正在编写一个Vue组件，它是一个网格容器。我将内容完全留给组件用户。我希望该组件能够具有最大的灵活性，以便用户可以根据自己的需要放置元素。用户将或不会在组件上应用

网格模板区域

。我现在可以做的是使用

window.getComputedStyle（parent）.getPropertyValue（'grid-template-columns'）

和

window.getComputedStyle（parent）.getPropertyValue（'grid-template-rows'）

来了解我的网格的基本结构。但我无法确定其中一个子项的哪个曲目是打开的。@sjahan我还试图访问

window.getComputedStyle（第二个）.getPropertyValue（'grid-column'）

和

window.getComputedStyle（第二个）.getPropertyValue（'grid-row'）

。两者都返回

auto/auto

。也许，正如你所建议的，现在唯一的解决办法就是对孩子们明确表态。