带有模板列的动态 CSS 网格：自动和全宽行

Question

我正在尝试根据一些数据动态构建 CSS 网格。我正在尝试实现如下布局：

   | a | b | c | d
---+---+---+---+---
full width
---+---+---+---+--
 x | 1 | 2 | 3 | 4
---+---+---+---+--
 y | 2 | 3 | 4 | 5

我有动态数量的列，以及跨越所有列的全宽行。

我生成的标记（在我的模板中的循环中）最终看起来像：

<div class="wrapper">
  <div class="box header">header 1</div>
  <div class="box header">header 2</div>
  <div class="box header">header 3</div>
  <div class="box header">header 4</div>
  <div class="box full-width">full width</div>
</div>

我试图通过用以下标记全宽行来设置它的样式：

    .full-width {
        grid-column: 1 / -1;
        grid-row: 2;
    }

我的理解是1 / -1 应该使行跨度从第一列到最后一列。在这种情况下，它不会，并且行的宽度不受影响。你可以看到这个问题live on Codepen。

Answer 1

您的 header 规则将行设置为 1，这会限制您的网格布局。您至少需要 3 行才能有一个用于标题，两个用于全角元素。

1. 首先完全删除header 规则。

2. 然后将 grid-template-rows 添加到包装器中。

3. 将您的包装器更改为使用repeat()，这会使水平跨度按预期工作：

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background-color: #fff;
  color: #444;
}

4. 为了使full-width 跨越 2 行，您总共需要至少 3 行。另外，您需要像这样声明您的网格行跨度：

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background-color: #fff;
  color: #444;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.full-width {
  grid-column: 1 / -1;
  grid-row: span 2 / span 2;
}

5. 如果您希望网格左上角有一个空节点，我们需要将列数增加到 5。我们还需要一个额外的类，将第一个网格子节点向右推一列（其他子节点将被推动）：

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background-color: #fff;
  color: #444;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.wrapper:first-child {
  grid-column-start: 2;
}