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

Question

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

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

预期：

实际：

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

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。