Responsiveness: How can I solve wrong number of columns display of grid in the tablet view?

Question

I have the following:

<div class="content" >

/* This is loop 25 times since I have 25 products, so 25 contents **/
    <div class="nested" v-for="product in products"> 
        <div class="one">{{product.Name}}</div>
        <div class="two">{{ product.percentage }}</div>
        <div class="three"><div><img :src="product.image"></div></div>
        <div class="four">{{ product.description }}</div>
        <div class="five">€ {{ product.original_price }}</div>
        <div class="six">€ {{ product.new_price }}</div>
        <div class="seven"><button>Remove</button></div>
        <div class="eight"><button>More Info</button></div>
    </div>
</div>

/* Tablet View */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    .content{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto;
        grid-gap: 10px;

    }

}

/* Mobile View */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {


    .content{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin: 0 auto;
        grid-gap: 10px;

    }

}
/* Laptop/Desktop View */
@media only screen and (min-width : 1224px) {

.content{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0 auto;
    grid-gap: 10px;
}
}

/* A nested grid(inner grid of content grid) with 4 columns and 5 rows */
.nested{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
    border-top: 6px solid #E20A16;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;

}

I am trying to get 2 columns of the Content grid in the tablet view, 1 column in mobile and 5 columns in laptop/desktop.

Like this:

Tablet view

* *
* *
* *
* *
* *
* *
* *
* *
* *
*

Mobile view

*
*
*
so on till 25.. 

Laptop/Desktop view

* * * * *
* * * * *
* * * * *
* * * * *
* * * * *

But instead, I am getting 1 column in the tablet view. I am not sure what I am doing wrong here. Would really appreciate some help.

SOLUTION: Followed the answer here by Adrian P.: Common CSS Media Queries Break Points

This worked!

Answer 1

Okay try and change the min-device-width to device-width and also maybe you should write this:-

//for laptops

    @media(min-width:1224px) {
    // Code goes here
    }

// for tablets
@media (min-width: 768px) and (max-width:1024px) {
//code goes here
}

// for phones
@media(max-width: 767px) {
  // Code goes here
}