基于百分比的列/行跨度

Question

我想知道是否有办法为 grid-column and/or 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

I'm wondering if there is a way to use percentage values for grid-column and/or grid-row.

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

grid-column 属性是 grid-column-start 和 grid-column-end 的 shorthand 属性。 "start" 长手在斜线之前，"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;
  }
}

基于百分比的列/行跨度

Percentage based column / row span

html

css

css-grid

responsive