网格布局下实现中间div缩放固定、左右div自适应拉伸的问题

嘿，我来帮你搞定这个需求！你想要中间的div在页面缩放时保持固定尺寸，左右两个自动拉伸填充剩余空间对吧？原来的网格列用了百分比设置，这就导致中间列会跟着页面缩放一起变化，咱们调整一下CSS就能轻松实现目标啦。

首先先纠正一下HTML里的小笔误——你写的<mdiv>应该是<div>，不然浏览器没法正确识别这个标签哦。

接下来是关键的CSS调整：把.dvCenter里的grid-template-columns: 40% 20% 40%;改成grid-template-columns: 1fr [固定宽度值] 1fr;，比如我这里用200px作为中间列的固定宽度，你可以根据自己的需求换成rem或者其他固定单位。这样设置后，左右两列会用1fr弹性分配容器的剩余空间，中间列则保持固定宽度，完全不会受页面缩放影响。

下面是修改后的完整代码：

HTML #

<div class="dvCenter">
  <div class="dvCenter1"></div>
  <div class="dvCenter2"></div>
  <div class="dvCenter3"></div>
</div>

CSS #

.dvCenter{
  background-color: black;
  height: 110px;
  align-items: center;
  display: grid;
  /* 核心修改：左右用1fr弹性分配，中间固定宽度 */
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: 100%;
}

.dvCenter1{
  background-color: blue;
  height: 80%;
  grid-row: 1;
  grid-column: 1;
}

.dvCenter2{
  background-color: brown;
  height: 100%;
  grid-row: 1;
  grid-column: 2;
}

.dvCenter3{
  background-color: blue;
  height: 80%;
  grid-row: 1;
  grid-column: 3;
}

简单解释一下：1fr是网格布局里的弹性单位，代表“剩余空间的一份”，左右各占1份就会自动平分容器除去中间固定宽度后的剩余空间，不管页面怎么缩放，中间的棕色div宽度都保持不变，左右的蓝色div会自动拉伸填满空隙，完美符合你的需求～

备注：内容来源于stack exchange，提问作者user3137261