如何选中CSS Grid auto-fill布局下每行的首个元素？

问题分析 #

auto-fill会根据容器宽度动态生成列数，无法用固定的nth-child公式直接选中每行首个元素；同时元素hover缩放时，首元素会向左溢出视窗，需要调整transform-origin来避免滚动条问题。

解决方案（JS+CSS变量，推荐） #

这种方法能自适应动态变化的列数，确保始终精准选中每行首个元素：

1. 修改CSS代码

:root {
  --grid-cols: 1; /* 默认列数，后续由JS动态更新 */
}

grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 185px);
  grid-auto-rows: 280px;
}

grid > div {
  transform: scale(1); /* 初始状态还原为1，仅hover时放大 */
  width: 250px;
  transition: transform 0.3s ease; /* 添加过渡动画提升体验 */
}

grid > div:hover {
  transform: scale(1.2);
}

/* 选中每行首个元素，设置缩放原点 */
grid > div:nth-child(var(--grid-cols)n + 1) {
  transform-origin: left center; /* 以左侧为缩放基准，避免溢出视窗 */
  /* 可在此添加其他自定义样式 */
}

2. 添加JS代码动态获取列数

这段代码会实时计算网格当前列数，并更新CSS变量：

const gridContainer = document.querySelector('grid');

function updateGridColumnCount() {
  const cols = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length;
  document.documentElement.style.setProperty('--grid-cols', cols);
}

// 页面加载时初始化
updateGridColumnCount();
// 窗口大小变化时重新计算
window.addEventListener('resize', updateGridColumnCount);

纯CSS备选方案（适合固定最大列数场景） #

如果能确定网格最多不会超过N列（比如最多5列），可以直接写多个nth-child选择器，无需JS：

grid > div:nth-child(2n+1),
grid > div:nth-child(3n+1),
grid > div:nth-child(4n+1),
grid > div:nth-child(5n+1) {
  transform-origin: left center;
}

这种方法简单但缺乏灵活性，列数超过设定值时会失效。

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