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

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;
}

您要让网格项从 网格行第 1 行 跨越到 网格行第 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

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

Why is my grid item not spanning multiple rows?

html

css

twitter-bootstrap

css-grid