媒体查询中grid-column对article元素失效，nav元素正常的问题

1. CSS规则顺序导致覆盖 #

你的媒体查询代码写在全局article样式的前面，而CSS中同优先级的规则，后面的会覆盖前面的。媒体查询里的article { grid-column: 4/17; }会被后面全局的article { grid-column: 2/10; }覆盖，所以媒体查询的设置不生效。

解决方法：把媒体查询块移到全局样式的后面，这样媒体查询的规则在满足屏幕条件时会优先生效：

/* 全局样式放在前面 */
article{
    grid-column: 2/10;
    height: auto;
    width: 100%;
    margin: 30px 0 0 0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 20px 10px #0000001a;
    padding-inline: 30px;
}

nav{
    grid-column: 7/14;
    display: flex;
    width: 100%;
    justify-content: center;
}

/* 媒体查询移到全局样式后面 */
/*sm-md*/
@media screen and (max-width:768px){
    .signup-btn, .login-btn{
        font-size: 1.4em !important;
    }
    .listitem{
        font-size: 1.7em !important;
    }
    nav{
        grid-column: 4/15;
    }
    article{
        grid-column: 4/17;
    }
}

2. 父容器未设置网格布局 #

grid-column属性仅对网格容器的直接子元素生效。你的article在main.grid-container内，但如果main.grid-container没有设置display: grid，article就不是网格项，grid-column自然无效。而nav能生效，大概率是因为它处于已设置display: grid的父容器中。

解决方法：给main.grid-container添加网格布局设置：

.grid-container.main {
    display: grid;
    /* 匹配你使用的列数范围，示例设置16列 */
    grid-template-columns: repeat(16, 1fr);
    gap: 10px; /* 可选，设置网格间距 */
}

3. 无效CSS属性干扰 #

全局article样式里的th: 100%;是无效属性，虽然浏览器通常会忽略，但可能引发潜在解析问题，建议删除，替换为正确的width: 100%;。

额外检查点 #

• 确认nav所在的父容器确实设置了display: grid；
• 用浏览器开发者工具（F12）查看article元素的样式面板，检查是否有更高优先级的规则（比如类选择器、ID选择器）覆盖了grid-column属性。

内容的提问来源于stack exchange，提问作者bigheroy22