CSS 网格每行第一项（选择每行第一项）

Question

我有一个使用

auto-fill

进行

grid-template-columns

编辑的网格。有没有办法选择每行的每个 first 元素，即使网格是

auto-fill

ed 的。也就是说，我有以下 CSS：

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

grid > div {
  transform: scale(1.2);
  width: 250px;
}

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

这会产生以下网格：

 ____   ____   ____   ____         ____
|    | |    | |    | |    |       |    |
| A1 | |    | |    | |    |  ...  |    |
|____| |____| |____| |____|       |____|
                  ...
 ____   ____   ____   ____         ____
|    | |    | |    | |    |       |    |
| An | |    | |    | |    |  ...  |    |
|____| |____| |____| |____|       |____|

我想选择所有

A1

-

An

网格元素来添加额外的 CSS 规则。

附加信息： 每个网格项都有一个

:hover

事件，在该事件中它会缩放到 1.2。当它出现时，每行最左边的项目将显示在窗口之外。也就是说，它创建了一个水平滚动条，并且无法看到全部内容。因此，我可以使用

transform-origin

来重新定位。但我需要将此 CSS 规则仅应用于每行的第一个元素。

感谢您的任何建议。

Answer 1

只要我们知道列数，

:nth-child()

选择器就可以让我们访问该行第一个元素。例如，

:nth-child(3n + 1) { }

当网格中有 3 列时。

:nth-child(4n + 1) { }

适用于 4 列。

在 :nth-child() 函数中，3n 查找位置可被 3 整除的每个元素（0、3、6、9 等）。

如果您想访问每行的最后一个元素，请在网格中有 3 列时使用`:nth-child(3n + 3)。

所以，简单的等式是，

:nth-child({number_of_column}n + 1)

代表每行的第一个元素。

:nth-child({number_of_column}n + {number_of_column})

每行的最后一个元素。