CSS grid layout changing column width with javascript

Question

I try setting up a CSS grid layout as follows

.wrapper {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(5, 200px);
}

Is it possible to locate grid-template-columns in JS then re-size the columns? I came across a situation where I could find it (lost the code) but when I tried changing it, Chrome DevTools say the value is computed and cannot be changed.

Any help pointing me in the right direction (or other ways to do it, but use of grid is a must) is highly appreciated.

Thanks.

Jade Cowan · Accepted Answer · 2017-09-11 03:00:39Z

5

@MikeC, if you're not opposed to using jQuery, you can change the column width using jQuery's .css() function, which

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

You can read more on it in jQuery's documentation for the function here.

Also, just so you can see it in action, I put together a codeply project that you can see it in action. If you click anywhere on the grid, it will resize (only once though). It's a primitive example.

Here's the jQuery code it uses.

$( "#grid" ).one( "click", function() {
  $( this ).css( "grid-template-columns", "repeat(2, 400px)" );
});

answered Sep 11, 2017 at 3:00

Jade Cowan

2,5931 gold badge22 silver badges33 bronze badges

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

4 Comments

MikeC Over a year ago

Thank you for answering. jQ is not allowed for this. Possible with an answer in pure javascript? Thx!

MikeC Over a year ago

I could use document.getElementsByClassName('wrapper')[0].style.gridTemplateColumns to access something but it returns an empty string...

MikeC Over a year ago

OK got it! Seems that I can directly set the above variable and it'll change the width right away! Thanks for assistance!

BlessedKey Over a year ago

It appears this works in FireFox but not in Chrome yet. Chrome 73.0.3683.75 (Official Build) (64-bit) Firefox 65.0 (64-bit) you can check here : codepen.io/bileschi/pen/ZPRPqr

Larry Aultman · Accepted Answer · 2018-09-04 01:17:42Z

@MikeC You didn't tell anybody how you got it to work. Assuming you have a button or some event that calls a toolExpandToggle() and assume that your class name for your grid CSS definition is called "canvas" then you can do something like this. In the CSS I have:

@media only screen and (min-width: 768px)   {
.canvas {
    grid-gap: .0em;
    grid-template-columns: 50px auto;      /* the values are the toolbar, content */
    grid-template-rows: 50px auto 25px;     /* The values are o365Nav (O365 stardard), content, statusbar. Note: o365Nav heigth is the padding value used by the modal menu. */
    grid-template-areas:
    "o365Nav  o365Nav"
    "tool content"
    "statusbar  statusbar";
}

}

In the HTML I have a button. Notice that I have my widths defined as data items where 50 matches the CSS. In any case these values will replace the CSS when used.

    <div class="tool" id="pl-tool" data-collasped="50"; data-expanded="200";>
    <div class="spacer"></div>
    <button class="tool-ms-button"><span class="ms-Icon ms-Icon--GlobalNavButton tool-ms-icon" aria-hidden="true" onclick="toolExpandToggle('pl-tool')"></span></button>
    <!-- now the tool bar buttons -->
    <div><button class="tool-button">item-a</button></div>
    <div><button class="tool-button">item-a</button></div>
</div>

Then I have a javascript function:

function toolExpandToggle(target) {
    let id = document.getElementById(target);
    let c = id.dataset.collasped;
    let e = id.dataset.expanded;

    let w = document.getElementsByClassName('tool')[0].offsetWidth;
    if(w < e) {
       document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = e + 'px auto';
    }
    else {
        document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = c + 'px auto';
    }

}

In my case I only had two columns. When I click a button I call the toggle method and change it to the data value. I hope this gets someone else a little further down the track.

StaRbUck42 · Accepted Answer · 2024-04-17 12:25:02Z

This is significantly easier these days now that we have css vars and can change them with javascript:

var onclick = function() {
  if (getComputedStyle(document.querySelector(':root')).getPropertyValue('--column-width') === '100px') {
    document.querySelector(':root').style.setProperty('--column-width', '200px');
  } else {
    document.querySelector(':root').style.setProperty('--column-width', '100px');
  }
}

:root {
  --column-width: 100px;
}

.wrapper {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(3, var(--column-width));
  grid-template-rows: repeat(1, 200px);
}

.one {
  background: green;
}

.three {
  background: blue;
}

<div class="wrapper">
  <div class="one">Column one</div>
  <button onclick="onclick">Click me</button>
  <div class="three">Column 3</div>
</div>

The js above will toggle the css var back and forth from 100 to 200 px. As long as you use the css var in the css, it'll update accordingly.

Collectives™ on Stack Overflow

CSS grid layout changing column width with javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related