Javascript to set css properties grid-template-columns and grid-template-rows

Question

I'm looking for an equivalent for grid-template-columns and grid-template-rows for javascript dom. I made a simple grid layout in html and css:

<div class="box">
    <div id="box1"><a href="#">box1</a></div>
    <div id="box2"><a href="#">box2</a></div>
    <div id="box3"><a href="#">box3</a></div>
    <div id="box4"><a href="#">box4</a></div>
</div>

.box {
    display: grid;  
    grid-template-columns: 33% auto;
    grid-template-rows: 350px 588px;
}

I want to edit the styling for grid-template-columns and grid-template-rows in javascript, but I found out javascript dom doesn't support this property. Is there any other way I can edit the boxes so I can change the size of them?

Thank you for helping.

Mark · Accepted Answer · 2018-10-31 19:01:52Z

3

You can use .style.gridTemplateColumns to alter the columns and .style.gridTemplateRows for the rows:

let a = true
setInterval(() => {
  let box = document.getElementById('box')
  box.style.gridTemplateColumns = a ? "20% auto" : "30% auto"
  box.style.gridTemplateRows = a ? "50px 50px" : "150px 188px"
  a = !a
}, 500)

.box {
  display: grid;
  grid-template-columns: 33% auto;
  grid-template-rows: 150px 188px;
}

<div id="box" class="box">
  <div id="box1"><a href="#">box1</a></div>
  <div id="box2"><a href="#">box2</a></div>
  <div id="box3"><a href="#">box3</a></div>
  <div id="box4"><a href="#">box4</a></div>
</div>

answered Oct 31, 2018 at 19:01

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Duco Over a year ago

Where do the question mark and the let a = true function for in your code?

Mark Over a year ago

@Duco that's a ternary operator. It's just making the css swap between those two values based on whether a is true of false.

Duco Over a year ago

is there a way I can use variables for the values of gridTemplateColumns and gridTemplateRows?

Collectives™ on Stack Overflow

Javascript to set css properties grid-template-columns and grid-template-rows

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related