css - grid-gap 只更新一侧的宽度

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>

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