为什么我的网格项目不跨越多行？

Question

我有一个 html 模板，如下所示：

<div class="my-grid-container">
    <div class="summary-card"  ng-repeat="cardData in summaryCardsCtrl.summaryDetails" >
        <div ng-include="'.....'"></div>
    </div>
</div>

包含的html 看起来像：

<div class="card">
    <div class="card-title" id="{{cardData.label}}">{{cardData.label}}</div>
    <div class="card-data">
        <div class="card-ico">
            .....
        </div>
        <div class="card-value">
            <span title="{{cardData.rawValue}}">{{cardData.value}}</span>
            <span>%</span>
        </div>
    </div>
</div>

我希望第一张卡片跨越两行，例如：

我正在使用 CSS3 GridBox，如下所示：

.my-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.my-grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  max-height: 70px;
}

div.my-grid-container > div.card:first-child {
    grid-row: 1 / 2;
}

但是直到现在它还没有起作用。 第一个 div 没有跨越两行。

我做错了什么？

Answer 1

您的代码：

div.my-grid-container > div.card:first-child {
    grid-row: 1 / 2;
}

您是在告诉网格项目从 grid row line 1 到 grid row line 2 .跨越一行。

如果您想跨越两行，请改用它：

div.my-grid-container > div.card:first-child {
    grid-row: 1 / 3;
}

或者这个：

div.my-grid-container > div.card:first-child {
    grid-row: 1 / span 2;
}

---

请记住，在每个网格中，行数等于行数 + 1，因为最后一行有一个额外的（最终）行。同样的概念也适用于列。

Firefox 提供了一个有用的工具来查看这一点。

在 Firefox 开发工具中，当您检查网格容器时，CSS 声明中有一个小网格图标。单击它会显示网格的轮廓。

更多详情：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts