Currently, I am trying to figure out a method for selecting columns within a CSS grid. Through the use of the :nth-child()
selector, I managed to select a column in a static grid. For instance, in a grid with 3 columns, :nth-child(2)
will target every grid item in the second column.
Unfortunately, this approach does not work when dealing with a responsive grid that includes three different media queries, as is the case for my project. My grid consists of 24 items and is displayed differently across various devices. On mobile devices, the content is shown in a 3x8 grid, while on tablets it becomes a 4x6 grid, and so forth. I need a solution to select specific columns consistently, regardless of the number of rows present.
Describing this problem can be challenging, so please let me know if further clarification is needed. As far as I can tell, there doesn't seem to be a viable CSS solution, which means a JavaScript or jQuery script may be necessary. To better understand the grid system I'm grappling with, refer to my CodePen example linked below: