带有模板列的动态 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 应该使行跨度从第一列到最后一列。在这种情况下，它不会，并且行的宽度不受影响。可以看到这个issue live on Codepen.

Answer 1

您的 header 规则将行设置为 1，这会限制您的网格布局。您至少需要 3 行才能让 header 有一个，full-width 元素有两个。

首先完全删除 header 规则。
然后将grid-template-rows添加到包装器中。
更改包装器以使用 repeat()，这会使水平跨度按预期工作：

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

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

.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。我们还需要一个额外的 class 来推动第一个网格 child一栏向右（另一栏children会被推过去）：

.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;
}

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

Dynamic CSS grid with template-columns: auto and full-width row

css

css-grid