学习网格显示，不知道如何使网格满页。例如:
.wrapper {
display: grid;
border-style: solid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-template-areas:
'a a a'
'a a a'
'b b b';
}
.first {
background-color: grey;
grid-area: a;
}
.second {
grid-area: b;
background-color: red;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Oil Tycoon</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrapper">
<div class="first">
123
</div>
<div class="second">
123456
</div>
</div>
</body>
</html>这里是由两个元素选择的三列，但它们不像grid-template-area那样在屏幕上显示。我如何使网格全屏?
正文只会拉伸到有内容填充的范围。因此，你应该给网格和主体一个最小高度100vh。Vh表示"视口高度"。
body, wrapper {min-height; 100vh;}
您可以在Codepen上使用解决方案:https://codepen.io/jensgro/pen/bGLyXVy?editors=1100
Jens欢呼,
我认为这是由于浏览器内置了边距或填充。看看Normalize，它会重置浏览器的默认样式行为。
我添加了
body { margin: 0; padding: 0; min-height:100vh;}
从正文中移除边距和内边距，重置其默认样式。，然后你可以为你的元素添加你自己的页边距。
body {
margin: 0; padding:0; min-height:100vh;
}
.wrapper {
min-height:100vh
display: grid;
border-style: solid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
grid-template-areas:
'a a a'
'a a a'
'b b b';
}
.first {
background-color: grey;
grid-area: a;
}
.second {
grid-area: b;
background-color: red;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Oil Tycoon</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrapper">
<div class="first">
123
</div>
<div class="second">
123456
</div>
</div>
</body>
</html>