Question

我有一个带有动态生成的行和列数的网格。单元格分别用grid-column-start放置。

我也有相应的标题，它们需要跨越每一列。我希望grid-column-start: 1; grid-column-end: -1会产生这种行为。但是，只有在使用grid-template-columns预先指定了列数的情况下，才会这样做。

请参见以下示例：

.grid {
  display: grid;
  grid-gap: 5px;
}

.grid--three {
  grid-template-columns: auto auto auto;
}

.grid--auto {
  grid-auto-columns: auto;
}

.grid-heading {
  background: pink;
  grid-column-start: 1;
  grid-column-end: -1;
  padding: 5px;
}

.grid-cell {
  background: lightblue;
  padding: 5px;
}

.grid-cell--1 {
  grid-column-start: 1;
}

.grid-cell--2 {
  grid-column-start: 2;
}

.grid-cell--3 {
  grid-column-start: 3;
}

<h3>Three column grid</h3>

<div class="grid grid--three">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell">
    one
  </div>
  <div class="grid-cell">
    two
  </div>
  <div class="grid-cell">
    three
  </div>
</div>

<h3>Any column grid</h3>

<div class="grid grid--auto">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell grid-cell--1">
    one
  </div>
  <div class="grid-cell grid-cell--2">
    two
  </div>
  <div class="grid-cell grid-cell--3">
    three
  </div>
</div>

是否可以在不规定列数的情况下获得完整的列跨越行为？

Answer 1

不幸的是，没有。当前版本的CSS Grid（Level 1）无法做到这一点。

要使网格区域扩展到所有列或行，请使用负整数方法（1 / -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

如果给定一个负整数，则从相反开始算起从显式网格的末端开始。

Answer 2

position:absolute可以做到这一点，但它仍然是一种骇人听闻的方式，因为您将需要一个额外的元素来放置第一个单元格，并将真正的元素放在顶部填充整行。如果不是第一行，可能会很棘手。

.grid {
  display: grid;
  grid-gap: 5px;
  position:relative; /* Don't forget this */
}

.grid--three {
  grid-template-columns: auto auto auto;
}

.grid--auto {
  grid-auto-columns: auto;
}
/**/
.grid:before {
   content:"\80"; /* Zero width invisible character */
   padding:5px;
   grid-column: 1/-1;
}
.grid-heading {
  background: pink;
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding: 5px;
}
/**/

.grid-cell {
  background: lightblue;
  padding: 5px;
}

.grid-cell--1 {
  grid-column-start: 1;
}

.grid-cell--2 {
  grid-column-start: 2;
}

.grid-cell--3 {
  grid-column-start: 3;
}

<h3>Three column grid</h3>

<div class="grid grid--three">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell">
    one
  </div>
  <div class="grid-cell">
    two
  </div>
  <div class="grid-cell">
    three
  </div>
</div>

<h3>Any column grid</h3>

<div class="grid grid--auto">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell grid-cell--1">
    one
  </div>
  <div class="grid-cell grid-cell--2">
    two
  </div>
  <div class="grid-cell grid-cell--3">
    three
  </div>
</div>

网格单元格可以跨越每一列而不指定列数吗？

2 个答案: