显示：网格对齐div答案

【问题标题】：display: grid aligning divs显示：网格对齐div
【发布时间】：2022-12-11 02:03:01
【问题描述】：

我在网格的 3 列中有 3 个 div，我希望中间的 div 在放大时保持静止。右边和左边的那个随着缩放而增长

HTML
<mdiv 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;   
    grid-template-columns: 40% 20% 40%;
    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; 
}

【问题讨论】：

标签： html css zooming css-grid

【解决方案1】：

我想你想要的是让页面开始时让 .dvCenter2 div 具有 20% 的宽度，然后在页面增长时保持当前宽度。但是 % 是一个相对单位，当屏幕变大时，20% 也比原来的 20% 大。

我想不出一个纯 CSS 的方法来做到这一点，但你可以使用 javascript 来查询容器的当前大小并修改 grid-template-column。检查下面的演示。希望这可以帮助！

$(".dvCenter").css("grid-template-columns", "1fr " + $(".dvCenter2").width() + "px 1fr");
$("#btn").click(function() {
  $(".dvCenter").toggleClass("enlarge");
});

.dvCenter{
    background-color: black; 
    height: 110px;
    width: 50%;
    align-items: center;
    display: grid;   
    grid-template-columns: 1fr 20% 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; 
}

.enlarge {
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mdiv class="dvCenter">
  <div class="dvCenter1"></div>
  <div class="dvCenter2"></div>
  <div class="dvCenter3"></div>
</div>
<button id="btn">Click to resize container</button>

【讨论】：