Html 基于百分比的列/行跨度

我想知道是否有一种方法可以使用

网格列

和/或

网格行

的百分比值

例如：

.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%的可用列

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

我想知道是否有一种方法可以使用

网格列

和/或

网格行

的百分比值

不，没有。这不是

网格列

和

网格行

属性的工作方式

网格列

属性是

网格列开始

和

网格列结束

的速记属性。“开始”长柄放在斜线之前，“结束”长柄放在斜线之后，如下所示：

grid-column: 2 / 4

上述规则相当于：

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

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

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

类似于

grid column:1/span 25%

的东西不起作用，因为25%不表示任何数量的柱线

这就是为什么上面的属性及其网格行对应项都是称为的网格功能的组件

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

.grid{
显示：网格；
框大小：边框框；
网格模板列：重复（12，1fr）；
栅柱间隙：24px；
}
.网格单元25{
格构柱：1/3跨；
}
@仅介质屏幕和（最大宽度：600px）{
.电网{
网格模板列：重复（24，1fr）；
}
.网格单元25{
格构柱端部：跨度6；
}
}

你想要一个网格，有12列，但你想要的网格单元格跨度为25%，这意味着你的案例中有3列/6列在手机上？是的，我可能想改变顺序。因为在手机里，我想减少空间，我听到了。为什么不采用百分比值是有道理的。