网格间隙仅更新一侧的宽度

Question

如您所见，当我更改grid-gap时，只有1，3和4的宽度被更新。
2的宽度完全不会更新。
我希望它更新1的宽度以及2，3和4的宽度。

MDN的演示表明可以相应地调整所有项目的大小。
https://developer.mozilla.org/en-US/docs/Web/CSS/gap

这是我的代码

.container {
  display: grid;
  width: 500px;
  height: 100px;
  gap: 20px;    /* Try to change this, width of 2 isn't updated */
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  transition: gap 0.3s linear;
}

.child {
  background-color: gray;
  text-align: center;
  font-size: 50px;
  color: white;
  line-height: 70px
}

.child-1 {
  grid-row-start: 1;
  grid-row-end: 3;
}


.child-2 {
  grid-column-start: 2;
  grid-column-end: 4;
}

<div class="container">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

Answer 1

这是因为（2）的宽度包含一个间隙，因此其宽度为2fr + gap。更改间隙也会更改fr，并且宽度将保持不变。

在这种情况下，1fr = (500px - 2*gap)/4是2fr + gap = (500px - 2*gap)/2 + gap = 250px

更改代码，并使用其他结构，其中（2）的宽度不是恒定的：

.container {
  display: grid;
  width: 500px;
  height: 100px;
  grid-gap: 20px; 
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  animation: change 1s linear infinite alternate;
}

.child {
  background-color: gray;
  text-align: center;
  font-size: 50px;
  color: white;
  line-height: 70px;
  grid-column:span 2;
}

.child-1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column:span 1;
}


.child-2 {
  grid-column-start: 2;
  grid-column-end: 6;
}

@keyframes change {
   to {
     grid-gap:1px;
   }
}

<div class="container">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

在这种情况下，1fr = (500px - 4*gap )/8并且（2）的宽度为4fr + 3*gap = (500px - 4*gap)/2 + 3*gap = 250px + gap，但是现在{3）和（4）将保持不变，因为2fr + gap=(500px - 4*gap)/4 + gap = 125px

将更新所有内容的另一种结构：

.container {
  display: grid;
  width: 500px;
  height: 100px;
  grid-gap: 30px; 
  grid-template-columns: 6fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  animation: change 1s linear infinite alternate;
}

.child {
  background-color: gray;
  text-align: center;
  font-size: 50px;
  color: white;
  line-height: 70px;
  grid-column:span 3;
}

.child-1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column:span 1;
}


.child-2 {
  grid-column-start: 2;
  grid-column-end: 8;
}

@keyframes change {
   to {
     grid-gap:1px;
   }
}

<div class="container">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

（2）的宽度等于250px + 2*gap。 （3）和（4）的宽度等于125px + 0.5*gap

另一种配置：

.container {
  display: grid;
  width: 500px;
  height: 100px;
  grid-gap: 30px; 
  grid-template-columns: 2fr 4fr 2fr 1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  animation: change 1s linear infinite alternate;
}

.child {
  background-color: gray;
  text-align: center;
  font-size: 50px;
  color: white;
  line-height: 70px;
  grid-column:span 2;
}

.child-1 {
  grid-row-start: 1;
  grid-row-end: 3;
}


.child-2 {
  grid-column-start: 3;
  grid-column-end: 7;
}

@keyframes change {
   to {
     grid-gap:1px;
   }
}

<div class="container">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

基本上，诀窍是避免元素的宽度恒定。

Answer 2

问题：

从外面看并不容易，但是如果您可以在Firefox开发人员工具中Examine the Grid Layout就能看到区别。

您会注意到两列2的宽度在变化，但父级保持不变，因为它跨越了两行并且将其破坏会导致网格不对称。

---

解决方案：

您可以使用此Grid Generator并对以下设置的代码进行一些更改：

现在1跨越了布局的两个分数，2跨越了四个分数，而3和4分别跨越了两个分数。这样，整个结构是对称的。

.container {
  display: grid;
  width: 500px;
  height: 100px;
  grid-gap: 20px; /* Try to change this, width of 2 isn't updated */
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  transition: grid-gap 1s ease-in-out;
}

.container:hover {
  grid-gap: 0px;
}

.child {
  background-color: gray;
  text-align: center;
  font-size: 50px;
  color: white;
  line-height: 70px;
}

.child-1 {
  grid-area: 1 / 1 / 3 / 2;
}

.child-2 {
  grid-area: 1 / 2 / 2 / 6;
}

.child-3 {
  grid-area: 2 / 2 / 3 / 4;
}

.child-4 {
  grid-area: 2 / 4 / 3 / 6;
}

<div class="container">
  <div class="child child-1">1</div>
  <div class="child child-2">2</div>
  <div class="child child-3">3</div>
  <div class="child child-4">4</div>
</div>