如何通过JavaScript使用X、Y索引访问CSS Grid中的对应网格元素？

完全可以通过原生JS实现该功能，核心逻辑是动态获取网格当前的列数，再通过行列索引计算对应元素的下标，适配响应式布局下列数动态变化的场景。

实现代码 #

/**
 * 通过行列索引获取CSS Grid中的元素
 * @param {number} rowIndex 行索引，从1开始计数
 * @param {number} columnIndex 列索引，从1开始计数
 * @param {string} containerSelector 网格容器选择器，默认值为.grid-container
 * @param {string} itemSelector 网格项选择器，默认值为.grid-item
 * @returns {Element|null} 匹配到的网格元素，超出范围返回null
 */
function getElementOfCssGrid(rowIndex, columnIndex, containerSelector = '.grid-container', itemSelector = '.grid-item') {
  const gridContainer = document.querySelector(containerSelector);
  if (!gridContainer) return null;

  // 动态获取当前网格的列数，适配响应式变化
  const computedStyle = window.getComputedStyle(gridContainer);
  const columns = computedStyle.gridTemplateColumns.split(' ').length;
  const gridItems = gridContainer.querySelectorAll(itemSelector);
  
  // 转换为从0开始的下标计算
  const itemIndex = (rowIndex - 1) * columns + (columnIndex - 1);

  // 边界判断
  if (itemIndex < 0 || itemIndex >= gridItems.length) return null;
  
  return gridItems[itemIndex];
}

使用示例 #

以你给出的3列网格为例：

// 获取第2行第3列的元素，对应内容为6的网格项
const targetEle = getElementOfCssGrid(2, 3);
console.log(targetEle.textContent); // 输出6

注意事项 #

• 该实现默认行列索引从1开始计数，如果你习惯从0开始计数，删除计算逻辑里的-1调整即可
• 仅适用于所有网格项都只占1行1列的常规布局，如果存在grid-row/grid-column跨单元格的元素，需要额外结合getComputedStyle读取元素的网格位置属性做匹配
• 动态列数适配是通过读取实时计算样式实现的，响应式布局下列数变化后也能正常匹配

内容的提问来源于stack exchange，提问作者HelloWorld