CSS 网格单元格不是正方形

Question

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

我来解释下图：

显示 CSS 网格区域，如检查器所示，它的大小为正方形
显示所有CSS条轨道组成的区域，可以看到所有列的总高度都超过了实际网格的高度
行和列轨道按分数间距调整大小
给定 CSS 网格的高度和宽度（实际上是 60vmin）。这里显示了计算值。我们看到两者是一样的，形成一个正方形。
显示了轨道的计算值。很明显，我们可以看到列宽与行高不相同。此外 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. Flexible Lengths: the fr unit

A flexible length or is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items fill space in a flex container.

粗体字是我的。在单元格之间平均分配的 space 是剩余的 space。如果没有remianing space，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>

CSS 网格单元格不是正方形

CSS grid cells are not square

css

reactjs

css-grid