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

选择CSS网格中的列

1 个答案: