在CSS Grid中使用带有隐式行的负整数

Question

我正在尝试使用平面HTML结构制作一个简单的侧边栏布局，其中第一个<aside>元素完全填充第一列。

我的问题是，负行结束值似乎不适用于第二列中所有元素的隐式创建行。

预期：

实际值：

下面是一个可运行的代码段，用于说明问题。

article {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: gray;
}

aside {
  grid-row: 1/-1;
  grid-column: 1/2;
  background: pink;
}

section {
  grid-column: 2/3;
  background: yellow;
}

<article>
  <aside>In the left column (top to bottom)</aside>
  <section>In the right column</section>
  <section>In the right column</section>
  <section>In the right column</section>
</article>

Answer 1

您只能在显式网格中使用负整数。

请参阅此处的网格规范：

  

7.1. The Explicit Grid

     

网格放置属性中的数字索引从边缘开始计算   显式网格。正指数从起始侧开始计算   （从最开始的行开始为1），而为负   索引从结尾侧开始计数（从最终的-1开始）   显式行。）

在这里......

  

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

     

如果给出一个负整数，则反而计数，开始   从显式网格的结束边缘开始。

如果网格中的曲目数量未知，则网格区域会跨越整个列/行（包括隐式曲目），CSS Grid Level 1中无法进行，除非您想尝试hack it