CSS 网格单元格不是方形的

Question

我有一个 CSS 网格。该网格的高度和宽度相同，形成一个正方形。网格的每一行和每一列的大小分别是高度和宽度大小的三分之一。这将使所有细胞呈方形。但它们不是方形的。他们看起来像，他们离开了。下面是截图

让我解释一下这个数字：

1. 显示 CSS Grid 区域，如检查器所示，它是正方形的
2. 显示所有CSS轨道形成的区域，我们可以看到所有列的总高度超过了实际网格的高度
3. 行和列轨道的大小由小数间距决定
4. 为 CSS 网格指定的高度和宽度（实际上是 60vmin）。这里显示了计算值。我们看到两者是相同的，形成一个正方形。
5. 显示轨道的计算值。很明显，我们可以看到列的宽度不与行的高度相同。此外，grid-template-rows 细节显示，第 2 行的高度略大于其他 2 行的高度。

我不明白为什么会这样。我想在网格正下方放置一个条，但是由于网格的表观高度超过了实际高度，因此应该在网格下方的元素与网格重叠。

* {
  box-sizing: border-box;
}

.center-area {
  width: 60vmin;
  margin-left: auto;
  margin-right: auto;
}

.board {
  height: 60vmin;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

@media screen and (max-width: 600px) {
  .board {
    height: 90vmin;
  }
}

.cell-content-empty {
  width: 100%;
  height: 100%;
}

.border-holder:nth-child(1) {
  border-bottom: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(2) {
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(3) {
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(4) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

.border-holder:nth-child(5) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(6) {
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(7) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(8) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(9) {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
}

<div className="center-area">
<div class="board">
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
</div>
</div>

Answer 1

此声明

.board {
  grid-template-rows: 1fr 1fr 1fr;
}

并不意味着你期望它做的事情

在standard definition你可以阅读

7.2.3。灵活的长度：fr 单位

一个灵活的长度或者是一个以fr为单位的维度，它代表了网格容器中剩余空间的一小部分。使用 fr 单位调整大小的轨道称为柔性轨道，因为它们会根据剩余空间进行伸缩，类似于弹性项目如何填充弹性容器中的空间。

粗体字是我的。单元格之间均匀分布的空间是剩余空间。如果没有剩余空间，则 fr 语句是无用的。对于您的情况，最好设置一个百分比值

* {
  box-sizing: border-box;
}

.center-area {
  width: 60vmin;
  margin-left: auto;
  margin-right: auto;
}

.board {
  height: 60vmin;
  width: 60vmin;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 33.33%);
}

@media screen and (max-width: 600px) {
  .board {
    height: 90vmin;
  }
}

.cell-content-empty {
  width: 100%;
  height: 100%;
}

.border-holder:nth-child(1) {
  border-bottom: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(2) {
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(3) {
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(4) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

.border-holder:nth-child(5) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(6) {
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(7) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(8) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(9) {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
}

<div className="center-area">
<div class="board">
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
</div>
</div>