Selecting a Column in a CSS Grid

Question

I'm looking for a way to select columns in a CSS grid. I found a way to select a column in a static grid, using the :nth-child() selector. For example: in a 3 column grid, :nth-child(2) will select every grid item in the second column.

However, this doesn't work when you have a responsive grid with three media queries like I do. My grid has 24 grid items. On mobile devices, the content is displayed in a 3 column by 8 row grid. On tablets, it is displayed in a 4 by 6 grid and so on. I need a way to select the 3rd column for example, no matter if there are 8 rows or 6.

It's kind of a hard problem to explain, let me know if i need to clarify further. There's no possible solution with CSS that i can think of, so it will probably be a JavaScript or jQuery solution. Here's my CodePen to illustrate the kind of grid system I'm working with.

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

https://stackoverflow.com/q/46308048/3597276 – Michael Benjamin Nov 11 '17 at 03:53 — Michael Benjamin, Nov 11 '17 at 03:53
related: https://stackoverflow.com/q/56069793 – djvg Mar 07 '23 at 21:53 — djvg, Mar 07 '23 at 21:53

score 2 · Accepted Answer · answered Nov 10 '17 at 21:50

2

Why don't you use media queries to select proper :nth-child() item?

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

answered Nov 10 '17 at 21:50

Matt

172
2
2
10

1

actually wth why did i not think of this. thanks that should work – loudenw Nov 10 '17 at 21:57
Happens all the time ;) – Matt Nov 10 '17 at 21:59

Selecting a Column in a CSS Grid

1 Answers1