网格在页面与小提琴中呈现不同答案

【问题标题】：Grid renders different in page vs. fiddle网格在页面与小提琴中呈现不同
【发布时间】：2020-11-17 05:06:42
【问题描述】：

我想用 HTML/CSS 创建一个方形网格。我有以下代码，它就是这样做的，但是与我的小提琴相比，当我在实际页面中使用它时，它会夹住侧面和底部。

原始 HTML/CSS 如下所示：

CSS

.grid {
  margin: 0 auto;
  background: black;
  max-width: 90vh;
  max-height: 90vh;
  padding: 1px;
}

.row {
  display: flex;
}
.box {
  background: white;
  margin: 1px;
  color: black;
  font-weight: bold;
  flex: 1 0 auto;
  position: relative;
}
.box::after {
  content: "";
  float: left;
  display: block;
  padding-top: 100%;
}
.box .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML

<div class="grid">
    <div class="row">
        <div class="box"><div class="inner">0</div></div>
        <div class="box"><div class="inner">1</div></div>
        <div class="box"><div class="inner">2</div></div>
    </div>
    <div class="row">
        <div class="box"><div class="inner">20</div></div>
        <div class="box"><div class="inner">21</div></div>
        <div class="box"><div class="inner">22</div></div>
    </div>
    <div class="row">
        <div class="box"><div class="inner">40</div></div>
        <div class="box"><div class="inner">41</div></div>
        <div class="box"><div class="inner">42</div></div>
    </div>
</div>

实际页面使用 50x50 网格，我不想打扰您，但请查看 the fiddle。

在小提琴中看起来真的很好，像这样：

但是当它进入真实页面时，它看起来像这样（剪掉了一点，以避免混乱）：

我知道实际页面还包含导航栏等内容，这会占用一些空间。但我猜这在小提琴中是一样的吗？ 90vh 不是应该占用 90% 的可用空间吗？

如果有人想生成网格，我正在使用 Blazor（服务器端）：

@page "/grid"

<div class="grid">
@for (int r = 0; r < _numRows; r++) {
    <div class="row">
    @for (int c = 0; c < _numCols; c++) {
        int rr = r; // Row of the specific div
        int cc = c; // Column of the specifc div
        <div class="box"><div class="inner">@(c + r * _numRows)</div></div>
    }
    </div>
}
</div>

【问题讨论】：

标签： html css blazor-server-side

【解决方案1】：

结果是与Bootstrap 发生冲突，而Bootstrap 也恰好有一个.row 元素。因此，通过将我的自定义行的名称更改为 .gridrow 它就像在小提琴中一样工作。

<div class="grid">
    <div class="gridrow">
    ...etc.

【讨论】：