在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

你为什么不使用媒体查询，选择合适的：第n个孩子（）项？

@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 
    } 
}