How to dynamically change the number of columns / or reinitialize the grid

[ghost]

I'm trying to dynamically change the number of columns in javascript.

Is there a way to do this?

Thanks,

[michaeltrilford]

Can you not just use the CSS?

@media screen and (max-width: 480px){ #grid[data-columns]::before { content: '1 .column.size-1of1'; } }

@media screen and (min-width: 481px) and (max-width: 768px) { #grid[data-columns]::before { content: '2 .column.size-1of2'; } } @media screen and (min-width: 769px) { #grid[data-columns]::before { content: '3 .column.size-1of3'; } }

/* Again, you’re free to use and define the classes: */ .column { float: left; } .size-1of1 { width: 100%; } .size-1of2 { width: 50%; } .size-1of3 { width: 33.333%; }

[alexisju]

I'm also interested by this question. The idea is to let the user choose the display : for example, between 1 colum (list) or 3 columns (pin board).

The easiest way is to have two (or more) templates (with specifical css and same content) and let the user reload the page with this other template but it will be nicer to that without reloading the page, dynamically in js...