为什么我的标签会跳出网格区域？答案

【问题标题】：Why does my tag jump outside the grid area?为什么我的标签会跳出网格区域？
【发布时间】：2022-02-15 05:21:23
【问题描述】：

我有一个学校项目，我正在尝试制作这个网站，但是我的 html 标记只是跳到了 css-grid 之外。我怎样才能解决这个问题？请记住，我是html / css的新手，所以请尝试以简单的方式回答。

这是它的外观图片：

这是我的代码：

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

【问题讨论】：

标签： html css

【解决方案1】：

您的问题在于“asd”区域。

他们有相同的名字，但他们并不相邻。

您可以通过更改这些区域名称来修复它。

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

【讨论】：