这是我的代码：
html, body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 8vh, 90vh, 2vh;
grid-template-areas:
"header"
"main"
"footer";
text-align: center;
}
header {
grid-area: header;
/* min-height: 8vh; */
background-color: green;
}
main {
grid-area: main;
/* min-height: 90vh; */
background-color: blue;
}
footer {
grid-area: footer;
/* min-height: 2vh; */
background-color: yellow;
}
.list-box {
width: 40%;
margin: auto;
background: orange;
} <!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">
<link rel="stylesheet" href="./style.css">
<title>Ever-List</title>
</head>
<body class="container">
<header>
<div>
<h1>Ever List</h1>
</div>
</header>
<main>
<div class="list-box">
<div>list1</div>
<div>list2</div>
<div>list3</div>
<div>list4</div>
<div>list5</div>
</div>
</main>
<footer>© Maximilian Crosby</footer>
<script href="script.js" type="text/javascript"></script>
</body>
</html>为什么在这种情况下使用grid-template-row时，我的值被忽略，网格高度是内容的最小值？
如果我将width: 100%; height: 100%;添加到html，body CSS类则将三行等分为窗口的三个部分。完全忽略网格模板行。
如果我只是将我的高值添加到每个项目中，我得到了我想要的东西，但显然我宁愿不这样做。
我想用我的三行填充窗口并单独调整每行高度。我在这里错过了什么？
谢谢！
我认为你的grid-template-rows语法是错误的。请参考此链接https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows