css - 响应能力 : How can I solve wrong number of columns display of grid in the tablet view?

Question

我有以下内容:

<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;

}

我试图在平板电脑 View 中获取 2 列 Content 网格，在移动设备中获取 1 列，在笔记本电脑/台式机中获取 5 列。

像这样:

平板电脑 View

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

移动 View

*
*
*
so on till 25.. 

笔记本电脑/台式机 View

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

但是，我在平板电脑 View 中得到了 1 列。我不确定我在这里做错了什么。真的很感激一些帮助。

解决方案:遵循 Adrian P. 的回答:Common CSS Media Queries Break Points

这成功了!

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
}