Only change one cell through link / CSS GRID

Is there a way to only change one cell of a CSS Grid with a link (), while the rest stays the same, like the way you can do it with Frames in HTML? (target / name)

Wow. Sort of. You can assign content to grid areas, or move things from one grid area to another.

I set up a repl.it to demonstrate this: I’d found a general idea about using style.gridArea in javascript on this stackOverflow post, but then extended it to named grid-template-areas, and it seems to work. If you click on the second button, it is moved to the grid-area named first, and the button 1 is moved to the grid-area named second.

So, short answer, yes. :wink:

1 Like