Question

我正在创建一个表，并且使用css的网格函数创建了大部分表，但是在顶部添加类别时遇到了问题。类别的数量将是动态的，所以我试图避免对每个类别的css样式进行硬编码。

我看到了grid-column-start属性，但是我希望它从第2列和第2列开始，但它不会这样做。

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

None

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

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

上述属性的速记属性为：

grid-row
grid-column

由于这些速记属性同时代表-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

如何让网格列启动和跨度协同工作？

1 个答案: