在 CSS 网格中选择列

Question

我正在寻找一种在 CSS 网格中添加 select 列的方法。我找到了一种在静态网格中 select 列的方法，使用 :nth-child() select 或者。例如：在 3 列网格中，:nth-child(2) 将 select 第二列中的每个网格项目。

但是，当您像我一样拥有包含三个媒体查询的响应式网格时，这将不起作用。我的网格有 24 个网格项。在移动设备上，内容显示在 3 列乘 8 行的网格中。在平板电脑上，它以 4 x 6 的网格等形式显示。例如，我需要一种方法 select 第 3 列，无论是 8 行还是 6 行。

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

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

Answer 1

为什么不使用媒体查询 select 正确的 :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 网格中选择列

Selecting a Column in a CSS Grid

javascript

jquery

css

css-grid