CSS Grid - 动态切换元素的网格区域位置

Question

我是网格新手。我尝试将元素放入网格上的其他位置。

我的期望：动态更改元素的“网格区域：名称”会将其放入网格上的另一个位置。 但这不起作用。它甚至破坏了代码“background-color: black;”没有被执行。

https://jsfiddle.net/qoem5Ldn/1/

HTML：

<div class="container">
  <p>nothing</p>
  <div id="c1">c1</div>
  <div id="c2">c2</div>
  <div id="c3">c3</div>
  <div id="c4">c4</div>
  <div id="c5">c5</div>
</div>

CSS：

.container{
  display:grid;
  background-color: #FF00FF;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    "c1 c2 c3 c4"
    "c1 c2 c3 c4"
    "c0 c5 c5 c5";
  
}


#c1{
  grid-area: c1;
  background-color: red;
}
#c2{
  grid-area: c0; /* initially we put it in c0 */
  background-color: green;
}
#c2:hover{ /* on hover we put c2 into it's place */
  grid-area: c2;
  background-color: black;
}
#c3{
  grid-area: c3;
  background-color: yellow;
}
#c4{
  grid-area: c4;
  background-color: blue;
}
#c5{
  grid-area: c5;
  background-color: orange;
}

甚至可以在网格生成后动态改变元素的位置？

Answer 1

问题在于您正在更改网格区域悬停时。因此，当您

:hover

越过绿色框时，它会移动到区域 c2，这意味着它不再位于光标下方，因此

:hover

不再适用，因此绿色框会移回光标下方的区域 c0，并且你陷入了循环。

您可以看到它在这里工作正常，我在单击时更改区域，而不是悬停时。

document.getElementById('c2').addEventListener('click', evt => {
  if (evt.target.style.gridArea == 'c2') evt.target.style.gridArea = ''
  else evt.target.style.gridArea = 'c2'
})

.container{
  display:grid;
  background-color: #FF00FF;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    "c1 c2 c3 c4"
    "c1 c2 c3 c4"
    "c0 c5 c5 c5";
}

#c1{
  grid-area: c1;
  background-color: red;
}
#c2{
  grid-area: c0;
  background-color: green;
}
#c3{
  grid-area: c3;
  background-color: yellow;
}
#c4{
  grid-area: c4;
  background-color: blue;
}
#c5{
  grid-area: c5;
  background-color: orange;
}

<div class="container">
  <p>nothing</p>
  <div id="c1">c1</div>
  <div id="c2">c2</div>
  <div id="c3">c3</div>
  <div id="c4">c4</div>
  <div id="c5">c5</div>
</div>