跨越列名的网格模板区域

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 级别）。

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

更多细节在这里：

• Grid areas not laying out properly in CSS Grid
• grid-template-areas with ASCII art is not working

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