将 jquery 用于网格模板区域

Question

我正在尝试使用 jQuery 动态设置 css 网格的 grid-template-area 功能的值，但需要使用变量而不是仅仅写出字符串...

var row_one = "a a a"
var row_two = "b b b"
var row_three = "c c c"

然后是一些版本：

$("#page").css('grid-template-areas', 'row_one row_two row_three');

对如何进行这项工作有任何想法吗？

Answer 1

有一些规则可以做到这一点：

• 都必须在一行中
• 所有行都需要外引号
• 每一行也必须在自己的引号中
• 你必须使用 " 代表一个， ' 代表另一个

像这样：$("#page").css('grid-template-areas', '"nav nav nav" "main main main"');