CSS子网格不显示行间距

发布于12月07日

我开始了解css的网格和子网格.处理一个包含两列和几个子网格的简单表单.

父网格有一个间隙:1em--列和行都正确地显示了一个1em的间隙.但是，子网格只显示列的间隙，行间隙做not次功--它是0.我想不出为什么... 我可以给子网格一个空格行:1em，这样行得通.但我更喜欢解决real问题，因此学习what首先会导致real问题.

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 id="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>

我知道#gridContainer(父级)没有GRID-TEMPLE-ROWS.因此，没有要继承的"行".但是GAP:1EM既适用于列也适用于行，所以这不应该是问题，对吧？我确实try 向#gridContainer添加了grid-template-row，但这只会导致行重叠/堆叠.

我还知道父网格(#subGrid)是一个ID，子网格(.subgrid)是一个类.这似乎是没有问题的，因为列工作正常.

#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 id="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>

CSS子网格不显示行间距

推荐答案

Css相关问答推荐

如何在CSS calc()中使用反向百分比/无单位计算？

视频嵌入在Bootstrap 5轮播中没有响应扩展

CSS立方体覆盖

如何缩小 Select 元素的背景图像？

如何减少弹性项目之间的差距

根据选项 colored颜色更改 Select 文本 colored颜色

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

CSS中元素的重叠

混合模式粘性位置

用css重复表格边框

带填充的水平边框

如何使用rvest中的 node 和类提取网页数据

是否可以对 CSS 网格中重复和可包装的列使用固定的最小和最大宽度？

在整个 DIV 周围添加 CSS 框阴影

边界半径应该剪辑内容吗？

填充剩余的垂直空间 - 仅 CSS

根据背景 colored颜色反转 CSS 字体 colored颜色

为什么浏览器会为 CSS 属性创建供应商前缀？

100% 高度减go 标题？

CSS 边距和填充速记属性顺序的助记符