CSS grid-template-columns 即使代码在媒体查询中处于活动状态，也不会更改

Question

您好，我正在开发网站插件，但在使用 css 网格显示这些帖子时遇到了一些问题。它是使用媒体查询进行的简单 grid-template-columns 更改。检查员说我的媒体查询处于活动状态，但模板列中的实际更改并未呈现。

这是网站 url： https://texas.momcollective.com/specific-post-testing/

这里是 css:

.post_holder {
    max-width: 100% !important;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 56px 24px;
    margin: 24px;
}
@media only screen and (max-width: 1351px) {
    .post_holder {
        grid-template-columns: auto auto auto;
    }
}

以下是检查员所说的哪些规则有效：

我总是使用媒体查询更改 template-columns；我不确定为什么不显示此特定代码

Answer 1

您已将 grid-column: 1 / 5 应用于 .site_url。但是，当您减少媒体查询中的列数时，您不会将其覆盖为 1 / 4。

这会强制创建隐式网格以将此网格项跨越到指定的 4 列。

有一种更好的方法可以在网格中创建全宽元素来规避此问题。请改用 grid-column: 1 / -1。这告诉网格项从左边的第一条网格线开始到右边的最后一条网格线。

CSS grid-template-columns 即使代码在媒体查询中处于活动状态，也不会更改

CSS grid-template-columns not changing even though code is active in media query

html

css

wordpress

wordpress-plugin-creation