在CSS网格中将负整数与隐式行一起使用 [英] Using negative integers with implicit rows in CSS Grid

问题描述

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

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

预期：

实际：

下面是一个可运行的代码段，

 文章{display：grid; grid-template-columns：200px 1fr;背景：灰色；}在旁边{网格行：1 / -1；网格列：1/2；背景：粉红色；}部分{网格列：2/3;背景：黄色；}  

 < article> < aside>在左栏中（从上到下）< aside> < section>在右列< / section>中， < section>在右列< / section>中， < section>在右列中< / section>< / article>  

解决方案

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

请参见此处的网格规范：

7.1。显式
网格

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

在这里...

8.3。基于行的放置： grid-row-start ， grid-column-start ， grid-row-end 和 grid-column-end 属性

如果给出负整数，则取反数，从显式网格的末尾开始
。

当网格中的轨道数未知时，在 CSS网格级别1 ，除非您要尝试 hack 。

I am trying to make a simple sidebar layout with a flat HTML structure, in which the first <aside> element fills in the 1st column completely.

My problem is, that the negative row end value seems to not work for the implicitly created rows for all my elements in the 2nd column.

Expected:

Actual:

Below is a runnable code snippet that illustrates the problem.

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>

解决方案

You can only use negative integers in an explicit grid.

See the Grid spec here:

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).

and here...

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.

Making a grid area span an entire column / row, including implicit tracks, when the number of tracks in the grid is unknown, is not possible in CSS Grid Level 1, unless you want to try to hack it.

这篇关于在CSS网格中将负整数与隐式行一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！