为什么我的网格项目没有跨越多行？ [英] Why is my grid item not spanning multiple rows?

问题描述

我有一个类似以下内容的html模板：

I have a html template like the following:

<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没有跨两行。

But it did not work till now. First div did not span two rows.

我在做什么错了？

推荐答案

您的代码：

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

您要告诉网格项目跨越 网格行1 到 网格行2 。

You're telling the grid item to span from grid row line 1 to grid row line 2. That spans one row.

如果要跨越两行，则改为使用：

If you want to span two rows, then use this instead:

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，因为最后一行有一条额外的（最终）线。相同的概念适用于列。

---

Keep in mind that in every grid the number of row lines is equal to the number of rows + 1, because the last row has an extra (final) line. The same concept applies to columns.

Firefox提供了一个有用的工具来查看此内容。

Firefox offers a useful tool for seeing this.

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

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid.

此处有更多详细信息： https://developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

这篇关于为什么我的网格项目没有跨越多行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！