Why does my tag jump outside the grid area?-CodePudding

I have a school project where I am trying to make this website, but my html tag just jumps outside the css-grid. How can I fix this? Keep in mind that I am new to html/css so please try to answer in a simple way.

Here is a picture of how it looks:

Here is my code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#grid_wrapper{
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr;
    grid-template-rows: 100px 100px 200px 200px 1fr;
    grid-template-areas: 
    "hdr hdr hdr nav"
    "img img img img"
    "img img img img"
    "img img img img"
    "asd art art asd"
    ;
}

#rubrik{
    grid-area: hdr;
    background-color: blue;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Välkommen till Härmanö</title>
    <link rel="stylesheet" href="css/style_start.css">
</head>
<body>
    <div id="grid_wrapper">
        <header id="rubrik">
            <h1>Välkommen till Härmanö</h1>
        </header>
    </div>
</body>
</html>

CodePudding user response：

your issue is with the "asd" areas.

They have the same name, but they are not next to each other.

You can fix it changing those area names.

grid-template-areas:    "hdr hdr hdr nav"
                        "img img img img"
                        "img img img img"
                        "img img img img"
                        "asd1 art art asd2";