网格区域不受尊重，一切都从顶部开始

Question

我最初有一个标题和主要元素，但在重新考虑我想要内容布局的外观后决定更改为网格。将我的内容移入带有 2 个新侧边栏的圣杯网格容器后，突然所有内容都粘在页面顶部。

据我所知，

.page-wrapper

的直接子级都不具有会扰乱层次结构的显示属性，并且从

width: min(65ch, 100% - 4rem);

元素中删除

main

不会对问题产生影响。

这是我第一次尝试 raw-dog HTML/CSS，我避免使用 JS 或其他任何东西。

这是完整网页的代码笔：

https://codepen.io/Perflexed/pen/PoVwqPa?editors=1100

如果您需要更多信息，请询问，以便我可以更新问题。

编辑：我正在使用自定义 HTML 元素，并尝试使它们具有块显示，以便它们的功能类似于

div

而不是

span

。这对结果没有任何影响。

Answer 1

这是因为您的媒体查询中存在一些错误。

1. 在最小宽度媒体查询中，不应使用

   repeat(3, 1fr 2fr 1fr)

   。

   repeat()

   复制以下片段，就像 写

   grid-template-columns: 1fr 2fr 1fr 1fr 2fr 1fr 1fr 2fr 1fr;

   。
2. 在您的媒体查询的两个中，您编写的媒体查询不正确。应该是

   @media only screen and (<condition>)

   ，而不是

   @media screen (<condition>)

   。

@media only screen and (max-width: 899px) { /* for PHONE and PORTRAIT TABLET */
    page-wrapper {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: 
        'header'
        'side-nav'
        'main'
        'aside'
        'footer';
    }
}

@media only screen and (min-width: 900px) { /* anything BIGGER */
    page-wrapper {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
        'header header header'
        'side-nav main aside'
        'footer footer footer';
    }
}

这解决了我在这里测试时的问题：https://codepen.io/SonicBoomNFA/pen/MWLYZZL?editors=1100