在CSS网格中选择列

Question

我正在寻找一种在CSS网格中选择列的方法。我找到了一种在静态网格中使用:nth-child()选择器选择列的方法。例如:在3列网格中，:nth-child(2)将选择第二列中的每个网格项。

但是，当你像我一样有一个有三个媒体查询的响应网格时，这是行不通的。我的网格有24个网格项。在移动设备上，内容显示在3列8行网格中。在平板电脑上，它被显示在一个4乘6的网格中，等等。例如，我需要一种选择第三列的方法，不管是8行还是6行。

这是一个很难解释的问题，如果我需要进一步澄清的话，请告诉我。我想不出用CSS解决方案的可能性，所以它可能是JavaScript或jQuery解决方案。下面是我的CodePen来说明我正在使用的网格系统的类型。

https://codepen.io/loudenwilhelm/pen/KyWQBr

Answer 1

为什么不使用媒体查询来选择合适的:nth-child()项？

@media screen and (min-width: 600px) {
    .grid-item:nth-child(1){
       //something
    }
}

@media screen and (min-width: 900px) {
    .grid-item:nth-child(2){
       //something
    }
}

@media screen and (min-width: 1200px) {
    .grid-item:nth-child(3){
       //something
    }
}