网格模板区域表现奇怪答案

【问题标题】：Grid-template-areas behaving odd网格模板区域表现奇怪
【发布时间】：2022-01-26 00:30:58
【问题描述】：

网格模板区域的行为很奇怪。我希望它能在整个页面上布局子项。但它只是在前两行被压扁。谁能帮我理解为什么？

我一定是误解了一些关键的 CSS 行为概念。例如，我希望 header、main、section 和 footer 都贯穿整个页面。

/* Global settings */

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

ul{
    list-style: none;
}

a{
    color: #fff;
    text-decoration: none;
}

body {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 2fr 1fr auto;
    grid-template-areas: 
    "header header header header"
    "main main main main"
    "section section section section"
    "section section section section"
    "footer footer footer footer"
    ;
}

header {
   background-color: rgb(0, 0, 255); 
   width: 100%;
}

main {
    background-color: blueviolet;
}

section {
    background-color: brown;
}

footer {
    background-color: green;
}

<!DOCTYPE html>
<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">
    <link rel="stylesheet" href="Grid.css">
    <title>Document</title>
</head>
<body>

    
    <!-- Navigation -->
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>    
            </ul>
        </nav>
    </header>
    
    <!-- Hero Image CTA -->
    <main>

    </main>

    <!-- Cards -->

    <section>
 
    </section>

    <section>

    </section>

    <footer>

    </footer>
    
</body>
</html>

【问题讨论】：

你没有为你的元素定义任何区域

标签： html css css-grid

【解决方案1】：

哈哈！它不起作用的原因是网格模板区域有 4 列。我把它缩短为一个。

【讨论】：