CSS grid layout changing column width with javascript -

i try setting css grid layout follows

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

is possible locate grid-template-columns in js re-size columns? came across situation find (lost code) when tried changing it, chrome devtools value computed , cannot changed.

any pointing me in right direction (or other ways it, use of grid must) highly appreciated.

thanks.

@mikec, if you're not opposed using jquery, can change column width using jquery's .css() function, which

get value of computed style property first element in set of matched elements or set 1 or more css properties every matched element.

you can read more on in jquery's documentation function here.

also, can see in action, put codeply project can see in action. if click anywhere on grid, resize (only once though). it's primitive example.

here's jquery code uses.

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