有没有一种方法可以直接访问CSS网格中自动放置的元素的实际网格坐标？

Question

有人在这里提出了类似的问题，但答案只有在页面上的每个元素都自动放置并且仅占据一列的情况下才有效。

我有一个12列的网格布局，其中前三行全部由一个跨越所有十二列的元素占据；那么我有三行自动放置的元素，每行占据六列。

尽管我可以根据先前的答案进行数学计算，但认为元素的计算位置未存储在Javascript可访问的任何位置似乎有些荒谬。

如果访问有关网格的计算出的CSS属性，则只会得到“自动”和“跨度6”，而不是实际计算出的行首或行尾数。真的没有办法访问grid-row和grid-column的计算值吗？

Answer 1

我无法\xe2\x80\x99t找到直接检索网格坐标的方法。

\n

这里\xe2\x80\x99s 是一个函数，用于获取网格内\xe2\x80\x99s 元素的网格坐标。它适用于占用超过 1 列或超过 1 行的元素。

\n

\r\n

\r\n

function getItemGridCoords(element) {\n\n  function digitsAndSpacesOnly(string) {\n    return string.replace(/[^\\d\\s.]/g, \'\');\n  }\n\n  function parseTemplate(gridTemplate) {\n // parses a CSS grid-template-[row|column] to Numbers and does cumulative summation\n // "100px 100px 100px" \xe2\x86\x92 [100,100,100] \xe2\x86\x92 [100,200,300]\n\n    return digitsAndSpacesOnly(gridTemplate).split(/\\s/gmi).map(Number).reduce((array,currentValue) => {\n      array.push(currentValue + array[array.length-1]);\n      return array;\n    },[0]);\n  }\n  \n  function findIndexOfClosest(array,target) {\n    return array.reduce((prev,curr,indexCurr) => {\n      return (Math.abs(curr - target) < Math.abs(array[prev] - target) ? indexCurr : prev);\n    });\n  }\n  \n  const grid = element.parentElement;\n  const computedStyles = getComputedStyle(grid);\n  const getGapsAdder = gap => (n,i) => n + i * gap;\n  const colsPositions = parseTemplate(computedStyles[\'grid-template-columns\']).map(getGapsAdder(digitsAndSpacesOnly(computedStyles[\'column-gap\'])));\n  const rowsPositions = parseTemplate(computedStyles[\'grid-template-rows\']).map(getGapsAdder(digitsAndSpacesOnly(computedStyles[\'row-gap\'])));\n  \n  const bounds = element.getBoundingClientRect();\n  const gridBounds = grid.getBoundingClientRect();\n  \n  return {\n    col : findIndexOfClosest(colsPositions, bounds.left - gridBounds.left),\n    row : findIndexOfClosest(rowsPositions, bounds.top - gridBounds.top),\n  };\n}\n\n\n\n\n\nfor (let element of document.querySelectorAll(\'.grid > *\')) {\n  element.innerHTML = JSON.stringify(getItemGridCoords(element));\n}

\r\n

.grid {\n  font-family: monospace;\n  display: grid;\n  grid : auto-flow dense / repeat(12,1fr);\n  gap: 0.5em;\n}\n\n.grid > * {\n  white-space: nowrap;\n  background: aliceblue;\n  min-height: 2.5em;\n}\n\n.whole {\n  grid-column: auto / span 12;\n}\n.two-thirds {\n  grid-column: auto / span 8;\n}\n.half {\n  grid-column: auto / span 6;\n}\n.third {\n  grid-column: auto / span 4;\n}\n\n.skyscraper {\n  grid-row: auto / span 3;\n}

\r\n

<div class=\'grid\'>\n <span class=\'whole\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n</div>\n\n<hr>\n\n<div class=\'grid\'>\n <span class=\'third\'></span>\n <span class=\'third\'></span>\n <span class=\'third\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n</div>\n\n<hr>\n\n<div class=\'grid\'>\n <span class=\'third skyscraper\'></span>\n <span class=\'third\'></span>\n <span class=\'third\'></span>\n <span class=\'two-thirds\'></span>\n <span class=\'third\'></span>\n <span class=\'third\'></span>\n <span class=\'half\'></span>\n <span class=\'half\'></span>\n</div>

\r\n

\r\n

\r\n

\n