Change grid layout on mouse click

Is it possible to change grid layout on mouse click? For example, if I have a grid layout of three rows and I want to have an event listener that when click the grid layout will change from three rows to three columns.

Yes it is possible. You would simply need to adjust the styling on the grid layout to accommodate your layout needs. I also believe it’s possible to add a transition from grid-template-rows to columns. Do you have any code you could share?

1 Like

It is possible. It will depend on how your html and css is structured. Can you provide your current code via a url, so we can take a look.

.gridcontainer {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
}

.gridcontainer {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  justify-content: center;
}

<div class="gridcontainer">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

i want the grid layout to change from three rows to three columns if any of the item is click.

i think i can do this with react. with mouse event. is that fine? or using html and css the only way i know to do that is hover effect , is that what you are looking for? how to create mouse event without java sript

You want to change the CSS of an element I did’nt test but I will look something like this

$(".item").addEventListener("click",function(){
    $(".gridcontainer").css("display","grid").css("grid-template-rows","1fr 1fr 1fr");
});

Okay if I’m understand correctly this might be what you want.

The css:

.gridcontainer {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-content: center;
}

The javascript:

  const gridContainer = document.querySelector('.gridcontainer')
  const gridItems = document.querySelectorAll('.item')

  // loop over each grid item and add an event listener
  gridItems.forEach(item => item.addEventListener('click', () => {
    gridContainer.style.gridTemplateColumns = '1fr 1fr 1fr'
  }))

Thanks guys assistance

You said you wanted to change from 3 rows to 3 columns when an item is clicked, but you did not say how many items per row there would be. Also, your current grid css (before clicking on an item) only has two rows, so unless you add more items, there would not be 3 rows to begin with.

If you started with 3 rows of data with 3 columns (equal width):

<div class="gridcontainer">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

and your css was:

.gridcontainer {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
}

that would look like:

Then you could use a modified version of @frankRose1’s code:

const gridContainer = document.querySelector(".gridcontainer");

gridContainer.addEventListener("click", function({ target: { className } }) {
  if (className.includes('item')) {
    this.style.gridTemplateColumns = "1fr 1fr";
  }
});

which would create 2 columns with 2 items per row.


The if statement is needed in case you have other elements nested inside the div with class=“gridcontainer”. If you would not have any other elements with different classes other than “item”, then it could be as simple as:

const gridContainer = document.querySelector(".gridcontainer");

gridContainer.addEventListener("click", function() {
  this.style.gridTemplateColumns = "1fr 1fr";
});

@RandellDawson Thanks heaps.