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