CSS 子网格不显示行间隙

Question

我正在了解 CSS 的网格和子网格。使用具有两列和一些子网格的简单表单。

父网格有一个间隙：1em - 列和行都正确显示了 1em 间隙。但子网格仅显示列的间隙，行间隙不起作用 - 它是 0。我不明白为什么...... 我可以给子网格一个间隙行：1em，这有效。但我更喜欢解决真实问题，从而了解什么首先导致了真实问题。 html 和 CSS：

#gridContainer {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1em;
  padding: 1em;
  justify-items: left;
}

.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  justify-items: left;
}

<div class="subgrid">
  <label for="nameCompanyDebt1">Naam onderneming:</label>
  <input type="text" id="nameCompanyDebt1" name="nameCompanyDebt1">
  <label for="companyDebt1">Zakelijke schuld</label>
  <input type="text" id="companyDebt1" name="companyDebt1">
</div>

我知道#gridContainer（父级）没有网格模板行。所以没有“行”可以继承。但是间隙：1em对列和行都重要，所以这不应该是问题，对吧？ 我确实尝试将 grid-template-rows 添加到 #gridContainer，但这只会导致行重叠/堆叠。

我还知道父网格（#subGrid）是ID，子网格（.subgrid）是一个类。这似乎没有问题，因为这些列按原样工作正常。

Answer 1

.gridContainer {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1em;
  padding: 1em;
  justify-items: left;
}

.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: span 2;
  grid-row: span 2;
  justify-items: left;
}

<div class="gridContainer">  
  <div class="subgrid">
    <label for="nameCompanyDebt1">Naam onderneming:</label>
    <input type="text" id="nameCompanyDebt1" name="nameCompanyDebt1">
    <label for="companyDebt1">Zakelijke schuld</label>
    <input type="text" id="companyDebt1" name="companyDebt1">
  </div>
</div>