基于百分比的列/行跨度

Question

我想知道是否有办法为grid-column 和/或grid-row 使用百分比值。

例如：

.grid {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 24px;
}

.grid-cell-25 {
  grid-column: 1 / span 25%;
}

@media only screen and (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(24, 1fr);
  }
}

请参阅span 25%。我希望grid-cell-25 将跨越任何给定断点中 25% 的可用列。

这是一个糟糕的主意吗？在这个例子中，对于任何比移动设备更大的东西，我有一个 12 列的布局。而且，在移动设备中，我有 24 列布局。我想避免必须为所有断点配置“跨度”，而是使用百分比值。

Answer 1

我想知道是否有办法为grid-column 和/或grid-row 使用百分比值。

没有。那没有。这不是 grid-column 和 grid-row 属性的工作方式。

grid-column 属性是grid-column-start 和grid-column-end 的简写属性。 “开始”长手在斜线之前，“结束”长手在斜线之后，如下所示：

grid-column: 2 / 4

上面的规则等价于：

grid-column-start: 2
grid-column-end: 4

这些属性使用列线来确定网格项的大小和位置。

在上面的示例中，网格区域将从网格列第 2 行（即第二列的起始边缘）开始，到网格列第 4 行（即第三列的结束边缘）结束。所以它涵盖了第二列和第三列。

grid-column: 1 / span 25% 之类的东西不起作用，因为 25% 不代表任何数量的列行。

这就是为什么上面的属性及其对应的网格行都是称为line-based placement 的网格功能的组成部分。

在这种情况下，您最好的选择是在您的媒体查询中添加第二条规则：

.grid {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 24px;
}

.grid-cell-25 {
  grid-column: 1 / span 3;
}

@media only screen and (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(24, 1fr);
  }
  .grid-cell-25 {
    grid-column-end: span 6;
  }
}