无法通过媒体查询更改网格列

Question

无法弄清楚为什么我的媒体查询不会更改类.halfwidth来在大于480px的桌面屏幕上彼此相邻显示框LEFT RIGHT。

媒体查询本身可以正常工作，背景可以从绿色变为白色，但是可以忽略网格列。

.halfwidth {   
    grid-column: 1 / -1 ;    
    background: gray; 
}


@media only screen and (min-width: 480px) {
   *{ background:green;}

    .halfwidth {
          grid-column: 1fr !important; 
        }
 } 

https://codepen.io/anon/pen/vaQNpm?editors=1100

Answer 1

就像您在your other question中遇到的问题一样，您的规则无效。

您使用的是only grid lines are allowed中的fr单位。

只需切换到grid-column: auto，您就应该准备就绪。

revised codepen