我一直在尝试学习CSS网格，但是遇到了一个网格错乱的问题。我知道没有很多内容，但是在尝试调试时，我删除了.item类。非常感谢您的帮助！
<!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="styles.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">
item 1
</div>
<div class="grid-container">
<div class="grid-item item-2">
item 2
</div>
<div class="grid-container">
<div class="grid-item item-3">
item 3
</div>
<div class="grid-container">
<div class="grid-item item-4">
item 4
</div>
<div class="grid-container">
<div class="grid-item item-5">
item 5
</div>
</div>
</body>
</html>
我的CSS：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container {
height: 100vh;
border: 10px solid #ccc
}
如果我理解正确，您的问题是，每当您声明一个新的div时，div似乎就会向右移动，对吗？
通过使用.grid-container类声明所有div，您正在堆叠border属性，使每个连续div的边框比上一个宽10px。
尝试将类仅用于第一个div，如下所示：
<!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="styles.css">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">
item 1
</div>
<div class="grid-content">
<div class="grid-item item-2">
item 2
</div>
<div class="grid-content">
<div class="grid-item item-3">
item 3
</div>
<div class="grid-content">
<div class="grid-item item-4">
item 4
</div>
<div class="grid-content">
<div class="grid-item item-5">
item 5
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container {
height: 100vh;
border: 10px solid #ccc
}
.grid-content {
border-top: 10px solid #ccc
}
工作示例：https://codepen.io/04kurisu/pen/WNNBmpE
如果我弄错了，请告诉我，我将更新答案。
看来您没有正确关闭标签。包含grid-container类的div标签没有关闭。在体内，理想情况下，您应该有这样的东西：
<div class="grid-container">
<div class="grid-item item-1">
item 1
</div>
</div>
<div class="grid-container">
<div class="grid-item item-2">
item 2
</div>
</div>
<div class="grid-container">
<div class="grid-item item-3">
item 3
</div>
</div>
<div class="grid-container">
<div class="grid-item item-4">
item 4
</div>
</div>
<div class="grid-container">
<div class="grid-item item-5">
item 5
</div>
</div>