CSS网格单元不是正方形的

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

让我解释一下这个数字：

显示CSS网格区域，如检查器所示，其大小为正方形

显示所有CSS轨迹形成的区域，我们可以看到所有列的总高度超过实际网格的高度

行和列轨迹按分数间距调整大小

CSS网格的高度和宽度（实际为60vmin）。此处显示了计算值。我们看到两者都一样，形成一个正方形

将显示轨迹的计算值。很明显，我们可以看到列的宽度和行的高度不一样。此外，网格模板行详细信息显示，第二行的高度略大于其他两行的高度

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

*{
框大小：边框框；
}
.中心区{
宽度：60vmin；
左边距：自动；
右边距：自动；
}
.董事会{
高度：60分钟；
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.董事会{
高度：90vmin；
}
}
.单元格内容为空{
宽度：100%；
身高：100%；
}
.持证人：第n名子女（1）{
边框底部：1px实心#808080；
右边框：1px实心#808080；
}
.持证人：第n名子女（2）{
右边框：1px实心#808080；
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（3）{
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（4）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
边框底部：1px实心#808080；
}
.持证人：第n名子女（5）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（6）{
边框顶部：1px实心#808080；
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（7）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
}
.持证人：第n名子女（8）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（9）{
边框顶部：1px实心#808080；
左边框：1px实心#808080；
}

这句话

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

并不意味着你期望它做什么

在图书馆里你可以阅读

7.2.3。柔性长度：fr单位

柔性长度或是带有fr单位的维度，表示网格容器中剩余空间的一小部分。使用fr单元调整大小的轨道称为柔性轨道，因为它们对剩余空间的响应类似于柔性项目填充flex容器中的空间

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

*{
框大小：边框框；
}
.中心区{
宽度：60vmin；
左边距：自动；
右边距：自动；
}
.董事会{
高度：60分钟；
宽度：60vmin；
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：重复（3，33.33%）；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.董事会{
高度：90vmin；
}
}
.单元格内容为空{
宽度：100%；
身高：100%；
}
.持证人：第n名子女（1）{
边框底部：1px实心#808080；
右边框：1px实心#808080；
}
.持证人：第n名子女（2）{
右边框：1px实心#808080；
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（3）{
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（4）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
边框底部：1px实心#808080；
}
.持证人：第n名子女（5）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（6）{
边框顶部：1px实心#808080；
边框底部：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（7）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
}
.持证人：第n名子女（8）{
边框顶部：1px实心#808080；
右边框：1px实心#808080；
左边框：1px实心#808080；
}
.持证人：第n名子女（9）{
边框顶部：1px实心#808080；
左边框：1px实心#808080；
}

您能否在问题的代码片段中添加一个最小的示例？请提供一个示例，以便在您的代码之前重现问题。添加了代码沙盒示例。我的原始代码是ReactJS，因此添加了一个类似的示例。在样品中可以观察到类似的行为。希望能有帮助。好的！将大小设置为百分比有效。我有两个问题。我已将网格容器的高度指定为60vmin。这不是创造了所需的可用空间吗？这些空间本来可以均匀分布的？此外，当我们为轨迹指定百分比大小时，它是指元素本身还是其父元素的大小？我假设元素本身。在原始代码片段中，电路板的宽度大于高度。这使得内部图像的宽度大于trans