为什么一个禁用的网格项目仍然出现在网格容器中？

Question

我在这里学习本教程：

https://www.youtube.com/watch?v=qTGbWfEEnKI

作者在他们的代码中加入了 github link，代码在这里：

https://github.com/designcourse/grid-template-areas-tutorial

我把下面的代码一字不差地复制在这里：

/* main.css */

body, html {
    height: 100vh;
}

body {
    margin: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(auto, 5);
    grid-template-areas:
        "sect1"
        "sect2"
        "sect3"
        "main"
        "footer";
}

aside {
    grid-area: sidebar;
    background-color: #007FFF;
}

header {
    grid-area: header;
    background-color: #91C8FF;
}

section:nth-of-type(1) {
    grid-area: sect1;
    background-color: #B3D8FD;
}
section:nth-of-type(2) {
    grid-area: sect2;
    background-color: #5E86AF;
}
section:nth-of-type(3) {
    grid-area: sect3;
    background-color: #6D9FD2;
}
main {
    grid-area: main;
    background-color: #7DA9D5;
}

footer {
    grid-area: footer;
    background-color: #588EC3;
}

@media only screen and (min-width: 768px) {

    body {
        margin: 0;
        display: grid;
        grid-template-columns: auto 27% 27% 27%;
        grid-template-rows: 8% 30% auto 10%;
        grid-template-areas:
            "sidebar header header header"
            "sidebar sect1  sect2  sect3"
            "sidebar main   main   main"
            "sidebar footer footer footer";
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <aside></aside>
    <header></header>
    <section></section>
    <section></section>
    <section></section>
    <main></main>
    <footer></footer>
</body>
</html>

所以我所做的就是尝试将 html headers 添加到元素中，以便我可以更好地看到它们映射的位置：

<body>
    <aside><h5>aside</h5></aside>
    <header><h5>hdr</h5></header>
    <section><h5>s1</h5></section>
    <section><h5>s2</h5></section>
    <section><h5>s3</h5></section>
    <main><h5>main</h5></main>
    <footer><h5>ftr</h5></footer>
</body>

现在在窄视图中，出现了一个滚动条，向右滚动，在右下角，本来不该出现的header 部分出现了。 Chrome 和 Edge.

中的结果相同

这是我第一次尝试使用网格，但我确实搜索了 S.O。在这里，不知道我做错了什么，或者我错过了什么。

Answer 1

您写道：

Now in the narrow view, a scrollbar appears, and scrolling to the right, in the lower right corner, the header section, which isn't supposed to be there, appears anyway. Same result in Chrome and Edge.

为什么它不应该在那里？

仅仅因为它没有在您的 grid-template-areas 规则中列出，并不意味着它不存在。

您的代码...

body {
    margin: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(auto, 5);
    grid-template-areas:
        "sect1"
        "sect2"
        "sect3"
        "main"
        "footer";
}

...简单地布置您的网格区域。

grid-template-areas 中未提及的网格区域只是出现在末尾。

（另请注意 syntax error in grid-template-columns. Should be repeat(5, auto), but it's not making a difference here because the error is ignored, causing it to fall back to the default setting，无论如何每个隐式行都是 auto。这意味着您的 repeat() 规则即使正确，也是多余的。但我离题了。 .)

您写道：

So all I did was try to add html headers into the elements so I could see better where they get mapped:

是的，在您添加内容之前，网格项目没有大小，因此看不到放错位置的项目。

如果您不想在较小的屏幕上使用 header，请使用 display: none 将其删除。

body {
    margin: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5, auto); /* CORRECTION */
    grid-template-areas:
        "sect1"
        "sect2"
        "sect3"
        "main"
        "footer";
}

aside {
    grid-area: sidebar;
    background-color: #007FFF;
}

header {
    grid-area: header;
    background-color: #91C8FF;
    display: none; /* NEW */
}

section:nth-of-type(1) {
    grid-area: sect1;
    background-color: #B3D8FD;
}
section:nth-of-type(2) {
    grid-area: sect2;
    background-color: #5E86AF;
}
section:nth-of-type(3) {
    grid-area: sect3;
    background-color: #6D9FD2;
}
main {
    grid-area: main;
    background-color: #7DA9D5;
}

footer {
    grid-area: footer;
    background-color: #588EC3;
}

@media only screen and (min-width: 768px) {

    body {
        margin: 0;
        display: grid;
        grid-template-columns: auto 27% 27% 27%;
        grid-template-rows: 8% 30% auto 10%;
        grid-template-areas:
            "sidebar header header header"
            "sidebar sect1  sect2  sect3"
            "sidebar main   main   main"
            "sidebar footer footer footer";
    }
    header { display: block; } /* NEW */

}

body, html {
    height: 100vh;
}

<body>
  <aside>
    <h5>aside</h5>
  </aside>
  <header>
    <h5>hdr</h5>
  </header>
  <section>
    <h5>s1</h5>
  </section>
  <section>
    <h5>s2</h5>
  </section>
  <section>
    <h5>s3</h5>
  </section>
  <main>
    <h5>main</h5>
  </main>
  <footer>
    <h5>ftr</h5>
  </footer>
</body>

jsFiddle demo

为什么一个禁用的网格项目仍然出现在网格容器中？

Why is a disabled grid item still appearing in the grid container?

html

css

css-grid