网格模板区域跨越列名

Question

所以你我想要这样的网格：

+-----------------------+
|          A            |
-------|--------|-------+
|  B   |  C     |   D   |
|      |        |       |
+------+--------+-------+

我可以这样做（scss 语法）：

grid-template-areas: "a-block a-block a-block" "b-block c-block d-block";

所以问题：我怎么能不重复，"a-block" 三次？ 我可以做类似 repeat("a_block", 3) 之类的事情吗？是否有更紧凑的方式来跨越网格区域列（在 sass 中）？

Answer 1

不，没有其他方法可以声明这些字符串值（在普通 CSS 级别）。

每个字符串都必须具有相同的列数，如网格规范中所定义。

此处有更多详细信息：

Answer 2

这个 sass 函数应该可以解决问题。不确定这是否是最好的编写方式，但它似乎有效。

@function repeat-str($str, $times) {
  @if $times > 0 {
    @return $str + repeat-str($str, $times - 1);
  }
  @return "";
}

.grid {
  grid-template-areas: repeat-str("a-block ", 3) "b-block c-block d-block";
  // output: grid-template-areas: "a-block a-block a-block " "b-block c-block d-block";
}

网格模板区域跨越列名

grid-template-areas spanning col-names

css

sass

css-grid