媒体查询中的网格列不适用于 html 文章元素？

Question

网格列似乎不适用于我的

article

元素，但适用于我的

nav

。

CSS

/*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;
    }
}

article{
    grid-column: 2/10;
    height: auto;
    th: 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;
}

不确定这里出了什么问题？

<main class="grid-container main">
    <article class="grid-wrapper article">
        content
    </article>
    <aside class="grid-wrapper aside">
        content
    </aside>
</main>

已经搜索过文档并尝试进行更改。

Answer 1

看起来您正在尝试将 article 和 nav 叠加在网格中。

grid-column

应该包含起始列和结束列。如果 article 在

grid-column: 2/10;

中，一旦您为

nav

声明 grid-column: 7/14;，它仍然无法工作（如果它们位于同一网格中）。 例如，如果没有像 .grid-container 或

.main

那样声明的类，

nav

不会显示在你的 html 中，并且 css 没有多大帮助，所以我可能误解了配置。