如何让 grid-column-start 和 span 协同工作？

Question

我正在创建一个 table，其中大部分是使用 css 的网格函数创建的，但是运行在顶部添加类别时遇到了问题。类别的数量将是动态的，因此我试图避免在 css 样式中为每个类别数量进行硬编码。

我看到了 grid-column-start 属性，但尽管我希望它从第 2 列开始并跨越 2 列，但它并没有这样做。

我该如何解决这个问题？谢谢

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 100px);
}

.box {
  background-color: #444;
  color: #fff;
  outline: 2px solid #000;
  padding: 5px;
}

.category {
  grid-row: 1;
  grid-column-start: 2 / span 2;
}

.header {
  grid-row: 2;
}


/*hacks to manually place grid boxes*/

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

.category2 {
  grid-row: 1;
  grid-column: 4 / span 2;
}

.row1 {
  grid-row: 3;
}

.row2 {
  grid-row: 4;
}

What I want:
<p>
  <div class="wrapper">
    <div class="box category1">Category</div>
    <div class="box category2">Category</div>

    <div class="box header">#</div>

    <div class="box header">header1a</div>
    <div class="box header">header1b</div>

    <div class="box header">header2a</div>
    <div class="box header">header2b</div>

    <div class="box data row1">1</div>

    <div class="box data row1">data1a</div>
    <div class="box data row1">data1b</div>

    <div class="box data row1">data2a</div>
    <div class="box data row1">data2b</div>
  </div>
</p>
<p></p>
What I have:
<p>
  <div class="wrapper">
    <div class="box category">Category</div>
    <div class="box category">Category</div>

    <div class="box header">#</div>

    <div class="box header">header1a</div>
    <div class="box header">header1b</div>

    <div class="box header">header2a</div>
    <div class="box header">header2b</div>

    <div class="box data">1</div>

    <div class="box data">data1a</div>
    <div class="box data">data1b</div>

    <div class="box data">data2a</div>
    <div class="box data">data2b</div>
  </div>
</p>

Answer 1

以下语法无效：

grid-column-start: 2 / span 2;

此属性的唯一允许值是 网格线 ，如下所示：

grid-column-start: 2;

相同的语法适用于所有四个基于行的放置普通属性：

grid-row-start
grid-row-end
grid-column-start
grid-column-end

来源：https://www.w3.org/TR/css3-grid-layout/#line-placement

上述属性的shorthand属性是：

grid-row
grid-column

因为这些 shorthand 属性同时表示 -start 和 -end 属性，所以它们可以接受两个值。

这条规则：

grid-column: 2 / span 2

有效并分解为：

grid-column-start: 2
grid-column-end: span 2

来源：https://www.w3.org/TR/css3-grid-layout/#placement-shorthands

如何让 grid-column-start 和 span 协同工作？

How do you get grid-column-start and span to work together?

html

css

grid-layout

css-grid