Javascript 使背景适合页面网格，无需滚动条

我正在尝试使用css（3x3个正方形）在我的页面上创建一个正方形背景，并在页面上添加其他元素，使它们能够适应这样的背景

因此，在制作背景（将屏幕分成3列）之后，我制作了一个css网格，但我注意到网格和背景之间有一个微小的间隙（尽管它们都将空间分成3列）

我想知道这个问题是否是由滚动条引起的，但我不知道如何解决它

你能帮我了解一下如何修复背景网格吗

正文{
保证金：0；
填充：0；
宽度：100%；
高度：700vh；
背景：#fff；
背景图像：线性梯度（rgba（20,20,20,7）.06em，透明.06em），线性梯度（90度，rgba（20,20,20,7）.06em，透明.06em）；
背景尺寸：33.3vw 33.3vw；
}
.集装箱{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
宽度：100%；
网格模板行：自动；
}
.要素-1{
网格列开始：1；
网格柱端：3；
}
.要素2{
网格列开始：3；
网格柱端：5；
}
.要素-3{
网格列开始：5；
网格柱端：7；
}
h1{
文本对齐：居中；
}

要素1
要素2
要素3

问题在于css中的

正文

选择器中的属性

宽度

。如果将其设置为100%，将占用包括滚动条在内的全部可用空间。因此，要解决此问题，您必须像这样使用

100vw

body{
   width: 100vw;
}

---

vw

表示窗口宽度的一部分，因此

100vw

表示窗口的整个宽度。现在div分数与背景没有差距。

我尝试过，但不幸的是它没有解决

.container

类集合

网格模板列
到
1fr 1fr
并删除所有
网格列开始
和
网格列结束
中的问题。你会得到同样的结果，但没有差距