Please note that I'm asking about multiple strings, not multiple properties.
More specifically, I'm looking for a javascript/jquery way to change grid-template-areas property.
This property can take multiple strings as the value. For example:
grid-template-areas: "a b b"
"a c d";
To make this work you need to include the double quotes within the new grid-template-areas value. As such you need to delimit the new string with single quotes. Try this:
$('#example-element').css('grid-template-areas', '"a b b" "a b b" "a c c"');
Note that this CSS rule only works in modern browsers (ie. everything except IE and older versions of Edge, <= 15)
$('button').click(function() {
$('#example-element').css('grid-template-areas', '"a b b" "a b b" "a c c"');
});#example-element {
background-color: #eee;
border: .75em solid;
padding: .75em;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 200px;
grid-template-areas: "a a a" "b c c" "b c c";
}
#example-element :nth-child(1) {
background-color: rgba(0, 0, 255, .2);
border: 3px solid #00f;
grid-area: a;
}
#example-element :nth-child(2) {
background-color: rgba(255, 0, 200, .2);
border: 3px solid #663399;
grid-area: b;
}
#example-element :nth-child(3) {
background-color: rgba(94, 255, 0, .2);
border: 3px solid green;
grid-area: c;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example-container">
<div id="example-element" class="transition-all">
<div>One (a)</div>
<div>Two (b)</div>
<div>Three (c)</div>
</div>
</div>
<button>Change layout</button>
el.style.gridTemplateAreas = `"a c b" "a c d"`;jsfiddle.net/khrismuc/w96c7ruL