Why css-grid doesn't work correctly in dynamically changing lauout using Jquery?

[blyk]

I have been trying to work with css-grid and I am changing the grid size using radio buttons between 4 tiles, 9 tiles and 12 tiles. I have checked the code and it seems fine but the layout is not working properly.

can anyone point out what could possibly be wrong with this?

Here is the codepen demo – https://codepen.io/xblack/pen/WzeLVa

[Paulie_D]

It’s not clear what “not working properly” means…

[Paulie_D]

…but I suspect it’s because of the assigned grid-coloumn/rows you had in place which aren’t really necessary in this instance

https://codepen.io/Paulie-D/pen/VXevrb

[blyk]

Strangely it is working but would you mind explaining why it wasn’t working? Also, I would like to know why tile 1 has red color and 3 has blue color always?

[Done] I got the solution

[Paulie_D]

You’d defined certain children as having grid positions but those weren’t being updated by the JQuery.

The same goes for some of the divs…which apply in multiple cases.

.main div:nth-child(3) {
  background: blue;
  height:100%;
}

for instance.

So if you make the selector more specific

.main > div:nth-child(2) { 
  background: green;
  display: grid;
  grid-gap: 0.4rem;
}

https://codepen.io/Paulie-D/pen/oqbWaN

[blyk]

@Paulie_D Thank you so much for the reply. :) you saved my life. Would you mind looking at my other question too. Please :)
https://css-tricks.com/forums/topic/div-animation-when-moving-from-one-container-to-another/

Nobody has touched that question.

[Paulie_D]

Yeah…sorry…that one is completely beyond me.

It would be incredibly complex…you’re gonna need motionpaths & all sorts

[blyk]

@Paulie_D Thanks for the hint. I can follow up your suggestion. Please let me know if you have any other hint too :) :) Thanks again :) Man!

[Author]

Posts