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

Question

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

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

预计：

实际：

下面是说明问题的可运行代码片段。

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

Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

这里...

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

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

当网格中的轨道数量未知时，使网格区域跨越整个列/行，包括隐式轨道，这在 CSS Grid Level 1, unless you want to try to 中是不可能的。

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

Using negative integers with implicit rows in CSS Grid

css

css-grid