使背景适合页面网格，而不使用滚动条

Question

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

所以，在制作了背景后，将屏幕分成了3列，我制作了一个css网格，但我注意到网格和背景之间有一个微小的差距(尽管它们都将空间分成了3列)。

​

​

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

你能帮我理解一下背景是怎么固定网格的吗？

​

body {
  margin: 0;
  padding: 0;
  
  width: 100%;
  height: 700vh;
 
  background: #fff;
  background-image: linear-gradient(rgba(20,20, 20, .7) .06em, transparent .06em), linear-gradient(90deg, rgba(20, 20, 20, .7) .06em, transparent .06em);
  background-size: 33.3vw 33.3vw;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100%;
  grid-template-rows: auto;
  
}
.element-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
.element-2 {
  grid-column-start: 3;
  grid-column-end: 5;
}
.element-3 {
  grid-column-start: 5;
  grid-column-end: 7;
}
h1 {
  text-align: center;
}

<div class="container">
  <h1 class="element-1">element 1</h1>
  <h1 class="element-2">element 2</h1>
  <h1 class="element-3">element 3</h1>
</div>

​

Answer 1

问题出在css的body选择器中的属性width中。如果你将其设置为100%，它将占用包括滚动条在内的所有可用空间。因此，要解决这个问题，您必须像这样使用100vw

body{
   width: 100vw;
}

vw表示窗口宽度的一部分，因此100vw表示窗口的整个宽度。现在，div分数与背景没有差距。