Streaming live at 10am (PST)

Change grid layout with a button

Hello, I’m looking for ways to resize the grid to allow users to switch from a 3 column grid to a 2 column grid layout by clicking on a button.

Basically, I need to edit the CSS properties of a grid component after clicking on a button. Custom code welcomed.

Hi and welcome!

You Can prepare 2 grids and use hide and show interaction.

Thank you.

I see what you mean, but I’d rather apply a more elegant single grid solution if possible.

Solved this using the following custom code:

<script>

document.getElementById('resize-button-1').onclick = function () {
    document.getElementById('resize-grid').style = 'grid-template-columns: 1fr 1fr';
};

document.getElementById('resize-button-2').onclick = function () {
    document.getElementById('resize-grid').style = 'grid-template-columns: 1fr 1fr 1fr';
};

</script>

Note you need to set the proper IDs on the grid and buttons for this to work.