CSS网格单元格不是正方形

Question

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

让我解释一下这个数字：

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

我无法理解为什么会这样。我想在网格下方放置一个条形，但由于网格的表观高度超过实际高度，因此应该在网格下方的元素与网格重叠。

<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>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/gather_seek_bar_thumb_outer_ring"
        android:height="30dp"
          android:width="30dp"
          android:gravity="center">
        <shape
            android:shape="oval">
            <stroke
                android:width="1dp"/>
        </shape>
    </item>

    <item android:id="@+id/gather_seek_bar_thumb_inner_ring"
          android:width="10dp"
          android:height="10dp"
          android:gravity="center">
        <shape android:shape="oval">
            <solid
                android:color="#48b3ff"/>
        </shape>
    </item>
</layer-list>

Answer 1

This statement

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

does not mean what you expect it to do

In the standard definition you can read

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.

Bold text is mine. The space that is distributed evenly between cells is the remaining space. If there is no remianing space, the fr statement is useless. For your case, it will be better to set a percentage value

* {
  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>