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列的布局。我想避免为所有断点配置“ span”，而使用百分比值。

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

基于百分比的列/行跨度

1 个答案: