CODEWITHSUNDEEP
javascripthtmlcss
Rob Monhemius
Rob Monhemius

Reputation: 5144

How to modify grid-template-areas with javascript

I have been trying to modify grid-template-areas with javascript. I found a property in the css properties list (elem.style) in the DOM called: gridTemplateAreas. But I seem to be unable to change it with javascript.

How do i modify the grid-template-areas-property with javascript?

Here is the code I tried:

window.addEventListener("click", function(){
	let elem= document.getElementById("grid");
	elem.style.gridTemplateAreas = 
  	"z z z"
    "a b c"
    "d e f"
  	console.log("The grid-template area should have been redefined now. The blue block should have move to the top row.");
});
#grid{
  width: 100px;
  height: 100px;
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:  "x x x"
                        "y y z"
                        "y y z";
}
#div1{
  background-color: blue;
  grid-area: z;
}
<h3>Click to activate the code</h3>
<div id="grid">
<div id="div1"></div>
</div>

PS: I am using Google Chrome a.t.m.

Upvotes: 19

Views: 22134

Answers (3)

Isaac Pak
Isaac Pak

Reputation: 4971

with styled-components


const Grid = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
  display: grid;
  grid-template-areas: ${(props) => props.areas 
  ? props.areas.reduce((acc, str) => (acc += `${"'" + str + "'" + "\n"}`), ``) + ";" 
  : "none"};
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
`

const StyledGrid = () => (
  <Grid areas={["z z z", "a b c", "d e f"]} >
)

Upvotes: 3

Michael Walter
Michael Walter

Reputation: 1477

Your elem.style.gridTemplateAreas = "z z z" "a b c" "d e f"

Is not a valid statement or it does not do what you want to do. You want to assign the value "z z z" "a b c" "d e f". Therefore, you need to surround it by quotes like this: elem.style.gridTemplateAreas = '"z z z" "a b c" "d e f"';

window.addEventListener("click", function(){
	let elem= document.getElementById("grid");
	elem.style.gridTemplateAreas = '"z z z" "a b c" "d e f"';

  	console.log("The grid-template area should have been redefined now. The blue block should have move to the top row.");
});
#grid{
  width: 100px;
  height: 100px;
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:  "x x x"
                        "y y z"
                        "y y z";
}
#div1{
  background-color: blue;
  grid-area: z;
}
<h3>Click to activate the code</h3>
<div id="grid">
<div id="div1"></div>
</div>

Upvotes: 25

JKong
JKong

Reputation: 264

just change to elem.style.gridTemplateAreas ='"z z z" "a b c" "d e f"';

Upvotes: 5

Related Questions