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

user_4484474 0
Viewed 71

I'm following this tutorial here:

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

The author included github link to their code, which is here:

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

I copy here below the code verbatim:

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

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

<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>

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.

lower-right corner

This is the first time I've ever tried using grid, but I did search around S.O. here and can't figure out what I'm doing wrong, or what I'm missing.

css-grid css html
1 Answers

You wrote:

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.

Why isn't it supposed to be there?

Just because it isn't listed in your grid-template-areas rule, doesn't mean it doesn't exist.

Your code...

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

... simply lays out your grid areas.

Grid areas that aren't mentioned in grid-template-areas simply appear at the end.

(Also note the 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, which is auto for each implicit row anyway. Meaning that your repeat() rule, even when correct, is redundant. But I digress...)

You wrote:

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

Yes, before you added content the grid items had no size, so the misplaced item wasn't visible.

If you don't want the header on the smaller screens, remove it with 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

user_35972760
Related