媒体查询不符合我的网格模板

Question

这里是新手。我希望网络能够响应，所以应用媒体查询，这样该死的东西就会将段落一个接一个地堆叠起来。

这是CSS:

.services{
    display: grid; 
    column-gap: 1rem;
}

@media (min-width: 480px) {
    grid-template-columns: repeat(3, 1fr);
}

这就是我想要它做的：

我希望这些部分一个接一个地堆叠，但这就是该死的事情所做的：

当我应用媒体查询时，我在 VS 控制台中收到此错误消息：

"code": "css-lcurlyexpected",
"severity": 8,
"message": "{ expected",
"source": "css",

在过去的 2 个小时里，我一直在一遍又一遍地写和重写相同的行... 我是新手，请不要这么苛刻:)

Answer 1

您的程序有错误。

@media (min-width: 480px) {
    grid-template-columns: repeat(3, 1fr);
}

这部分程序是错误的。您定义的是媒体查询，而不是应该分配此属性的 class。使用以下代码删除这部分程序：

@media (min-width: 480px) {
    .services{
        grid-template-columns: repeat(3, 1fr);
    }
}

media query is not respecting my grid template