Choosing a Specific Column within a CSS Grid

Question

Choosing a Specific Column within a CSS Grid

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:

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

javascript jquery css css-grid

Answer 1

Answer №1

Have you considered using media queries to target specific :nth-child() elements?

@media screen and (min-width: 600px) {
    .grid-item:nth-child(1){
       //custom CSS for this item
    }
}

@media screen and (min-width: 900px) {
    .grid-item:nth-child(2){
       //custom CSS for this item
    }
}

@media screen and (min-width: 1200px) {
    .grid-item:nth-child(3){
       //custom CSS for this item
    }
}

Answer 2

Have you considered using media queries to target specific :nth-child() elements?

@media screen and (min-width: 600px) {
    .grid-item:nth-child(1){
       //custom CSS for this item
    }
}

@media screen and (min-width: 900px) {
    .grid-item:nth-child(2){
       //custom CSS for this item
    }
}

@media screen and (min-width: 1200px) {
    .grid-item:nth-child(3){
       //custom CSS for this item
    }
}

Choosing a Specific Column within a CSS Grid

Answer №1

Similar questions

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

Leveraging AJAX to access a PHP file

In a React component, what is the significance of "this" in relation to accessing state values (this.state...)?

The child element with the specified position within the id element

Encountering difficulties reaching $refs within component method

Is the jQuery form plugin not passing any data to Node.js?

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

How can I extract the text enclosed in <li> tags using JavaScript?

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Struggling to delete a specific item by its ID from MongoDB within a Next.js application

Achieve full parent width with floated divs

Error: Conditional formatting not compatible with JavaScript detected

Having trouble with the dropdown onclick event not triggering when an item is selected in React?

Enhancing a bootstrap gallery with a zoom in effect

Passing variables dynamically in a created Express.js route

javascript utilizing key inputs

How can I display a Bootstrap modal in Ember.js after rendering it in an outlet?

ReactJS component's function become operational only after double tapping

Acquiring Device Data in React-Native for iOS

Crafting Effective AngularJS Directives