使用Grid布局实现带宽度限制的自适应侧边栏问题求助

直接调整Grid布局的列定义，并为子元素绑定对应的网格区域即可实现需求，修改后的代码如下：

CSS 代码 #

.portion {
  display: grid;
  grid-template-columns: minmax(20px, 200px) minmax(320px, 1fr) minmax(20px, 200px);
  grid-template-areas: "pleft pcore pright";
  width: 100%; /* 确保容器占满视窗宽度 */
}

.left {
  grid-area: pleft;
  min-width: 20px;
  max-width: 200px;
}

.core {
  grid-area: pcore;
  min-width: 320px;
}

.right {
  grid-area: pright;
  min-width: 20px;
  max-width: 200px;
}

HTML 代码 #

<div class="portion">
  <div class="left"></div>
  <div class="core"></div>
  <div class="right"></div>
</div>

关键逻辑说明 #

• 父容器的grid-template-columns用minmax()函数直接定义每列的尺寸范围：左右两栏限制在20px到200px之间，中间栏以1fr占据剩余空间，同时保证最小宽度为320px。
• 为三个子元素设置grid-area，与父容器的grid-template-areas对应，确保元素布局到指定网格位置。
• 父容器设置width: 100%，保证它随视窗宽度同步变化。

内容的提问来源于stack exchange，提问作者twohot