CSS网格左右未使用的空间

Question

我正在尝试创建CSS网格组件，但是一个问题不断出现，我一生中找不到任何解决方案。

因此，作为一个基本示例：

.grid {
  display: grid;
  grid-gap: 1px;
  background: black;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.item {
  background: white;
}

<div class="grid">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
</div>

什么会产生以下结果：

问题是：

您如何删除侧面空间，黑色空间应与网格间隙相同？

这有点简单，但是是一个主要问题。我想念什么？我尝试了页边距，布丁和各种“变通方法”，但是所有这些都在顺带带来了不同的问题。

我觉得这已经有了答案，但是对于我一生来说，我找不到合适的解决方案。

Answer 1

body {margin: 0;}为我工作。

body {
margin: 0;
}
.grid {
  display: grid;
  grid-gap: 1px;
  background: black;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.item {
  background: white;
}

<div class="grid">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
</div>

Answer 2

好，所以我想通了。所以我不确定这是错误还是缺少什​​么，但是解决方案是将网格包装到包装器中，例如：

<style>
.grid-container {
    border:1px solid red;
}

.grid {
    display: grid;
    grid-gap: 1px;
    background: black;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    border:1px solid green;
}

.item {
    background: white;
}
</style>
<div class="grid-container">
    <div class="grid">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>

包装器（红色边框）占用了可用空间，但是网格随后正确地放置了，没有包装器，网格将像包装器一样散开，但是表现得像在包装器内部一样。

正如我在评论中提到的，这是Blazor Server Side项目中的剃刀组件发生的情况。不知道这对我，项目或技术是否是排他性的。

P.S。

包装器不需要CSS类或样式，它可以是一个简单的标记。