Использование jquery для grid-template-area

Question

Я пытаюсь динамически установить значения функции grid-template-area сетки css, используя jQuery, но мне нужно использовать переменную, а не просто записывать строку ...

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"');