使网格项跨越隐式网格中的最后一行/列答案

【问题标题】：Make a grid item span to the last row / column in implicit grid使网格项跨越隐式网格中的最后一行/列
【发布时间】：2017-10-18 12:55:21
【问题描述】：

当我不知道行数时，是否可以让网格项从第一行跨越到最后一行？

假设我有以下 html，其中包含未知数量的框。

如何使第三个.box 从第一个网格线跨越到最后一个网格线？

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【问题讨论】：

在CSS的一个全新特性中无法实现这个基本要求，真是愚蠢。

标签： html css css-grid

【解决方案1】：

当我不知道行数时，是否可以使网格项从第一行跨越到最后一行？

current spec（级别 1）中似乎缺少此问题的自然 Grid 解决方案。所以答案是“不”，严格来说是 Grid 属性。

但是，正如this answer 中所指出的，绝对定位可能是可能的。

虽然 CSS Grid 无法使网格区域跨越隐式网格中的所有列/行，但它可以在显式网格中完成这项工作。

使用负整数。

CSS Grid 规范中有两个有趣的部分：

7.1. The Explicit Grid

网格放置属性中的数字索引从边缘开始计数的显式网格。正索引从一开始就计数，而负索引则从末尾开始计数。

这里……

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

如果给定一个负整数，它会倒数，开始从显式网格的末端边缘。

换句话说，在处理显式网格时，这是您使用这些属性定义的网格：

grid-template-rows
grid-template-columns
grid-template-areas

...您可以通过设置此规则使网格区域跨越所有列：

grid-column: 3 / -1;

这告诉网格区域从第三列线跨越到最后一列线。

反过来是：

grid-column: 1 / -3;

同样，此方法仅适用于显式网格。

【讨论】：

我不明白显式/隐式部分...请解释一下这是什么意思
显式网格是您使用容器上的grid-template-* 属性定义的行和列。隐式网格是容器自动生成的行和列，以容纳位于显式网格之外的网格项。
网格行的负整数在任何浏览器中都不适用于我。
此答案无效。您必须知道要显式定义的行数才能使 -1 起作用。最初的问题也是关于隐式行的。
这里的关键词是显式网格。这个技巧在隐式网格中不起作用。再次写在这里以提醒自己和任何阅读本文的人。

【解决方案2】：

您可以将 grid-row-start 添加到该框 css，并将其设置为跨越一个荒谬的数字。

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

编辑 - 免责声明：

这是一个非最佳解决方案，并非在所有浏览器中都有效，请小心！尽管这在某些浏览器 (Chrome) 中似乎可以正常工作，但其他浏览器 (Firefox) 会产生荒谬的行数，从而导致问题。

【讨论】：

imo chomes 可以正确处理此问题，而 firefox 则不能。如果没有内容，创建这些行是没有意义的......遗憾的是，最后一行没有“神奇”的名称（如:last-child）
IMO 做你所要求的（正如 FF 所做的）是正确的行为，即使它搞砸了黑客。如果我通过 css 使用了两列，我不希望 Chrome 不创建它们，因为这些列是空的。当然，CSS-grid 应该被修复以允许这样做而无需 hack。
似乎 Firefox 不再创建荒谬的行数（或至少是列，这是我的需要/测试）。至少，它不会在其网格调试器中报告它们。
您如何实现这一点，以便网格的第一项在网格的开头扩展为全高列？像这样i.imgur.com/UgdYrYx.png
@George，可能是错误的，因为我做了一个 60 秒的快速破解，但是，将选择器从 nth-child 更新为 first-child，并将 grid-column 更新为 1？

【解决方案3】：

一个实际上对我有用的解决方案，可以在您想要增长到最后的元素上设置position: absolute;。这将有其缺点，但在某些情况下可能会挽救生命。这是一个完整的例子：

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }

<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>

【讨论】：

【解决方案4】：

因此，如果这似乎还不可能，您可能会选择更改结构并嵌套网格。

如果您无法提前这样做，请使用 JavaScript 取出第三个框并将其放在原始网格容器旁边。

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

.box {
    background-color: blue;
    padding-bottom: 20px;
    border: 1px solid red;
}

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}

<div class="container">
    <div class="nested_grid">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>

【讨论】：