我正在尝试为网站分配制作一个侧导栏，我正在尝试利用网格来解决所有问题。我将身体分成两列。一个用于导航，另一个用于内容。然而，网格似乎不像我在做什么，我完全迷失了。容器二似乎工作正常，但容器一个只是到处都是，我甚至不能将它分成4个相等的行，填满页面的整个高度...有人可以帮我解释我做错了什么我该怎么办呢？非常感谢！
body{
background: #5f2072; /* Old browsers */
background: -moz-linear-gradient(-45deg, #5f2072 0%, #183661 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #5f2072 0%,#183661 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #5f2072 0%,#183661 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f2072', endColorstr='#183661',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-repeat: no-repeat;
background-attachment: fixed;
display: grid;
grid-template-columns: 15% 85%;
margin:0;
}
.container{
background-color:white;
overflow:hidden;
padding:15px;
display: grid;
grid-template-rows: 25%,25%,25%,25%;
}
p{
position: relative;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Explore & Imagine</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="main.js"></script>
</head>
<body>
<div class="container">
<p>this is something else</p>
<p>this is something else</p>
<p>this is something else</p>
<p>this is something else</p>
</div>
<div class="container2">
<p>this is something else</p>
</div>
</body>
</html>我认为你的问题是grid-template-rows线上的逗号。只需删除它们，它应该工作得很好。
.container{
background-color:white;
overflow:hidden;
padding:15px;
display: grid;
grid-template-rows: 25% 25% 25% 25%;
}