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

Question

我有一个如下的html模板：

b

包含.listBar{ position: absolute; left: 40px; top: 210px; width: 30%; box-sizing: border-box; } .header { color: whitesmoke; text-align: left; } /* add button */ #add{ color: whitesmoke; border: none; background-color: inherit; padding: 14px 20px; font-size: 16px; cursor: pointer; float: left; } #add:hover{ background-color: rgb(85, 78, 78); } /* input text field */ #input{ width: 75%; font-size: 16px; border: none; background-color: aliceblue; padding: 14px; float: left; } 的内容如下：

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

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

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

html

但直到现在它才起作用。 第一个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