如何让CSS Grid的content区域保持最大宽度，wide区域优先收缩？

需求与问题 #

我有一个结构为full-start | wide-start | content-start | content-end | wide-end | full-end的CSS Grid布局，需求如下：

• Content区域始终保持**77rem（1232px）**的最大宽度
• 当屏幕缩小时，Wide区域优先收缩，直到与Content区域完全贴合

但当前实现中Wide区域始终保持固定的最大宽度，不会随屏幕缩小而收缩，需要调整代码实现预期效果。

原代码 #

.my-grid {
  --const-content: 77rem;
  --const-max-inline-size: 90rem;
  
  --gutter: 4rem;
  --content: minmax(0, var(--const-content));
  --wide: minmax(0, calc((var(--const-max-inline-size) - var(--const-content)) / 2));
  --max-inline-size: calc(var(--const-max-inline-size) + (var(--gutter) * 2));
    
  display: grid;
  grid-template-columns: [full-start] var(--gutter) 
                         [wide-start] var(--wide) 
                         [content-start] var(--content) [content-end] 
                         var(--wide) [wide-end] 
                         var(--gutter) [full-end];
  max-inline-size: var(--max-inline-size);
}

.block {
  padding: 2rem;
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
}

.block--content {
  grid-column: content;
  background-color: lightgreen;
}

.block--wide {
  grid-column: wide;
  background-color: lightblue;
}

.block--full {
  grid-column: full;
  background-color: lightgray;
}

<div class="my-grid">
  <div class="block block--full">full</div>
  <div class="block block--content">content</div>
  <div class="block block--wide">wide</div>
</div>

问题根源 #

原代码中--wide变量是基于固定的--const-max-inline-size计算出的固定值，相当于给Wide区域设置了不可收缩的固定宽度，导致屏幕缩小时它无法自动缩小。要实现Wide区域优先收缩，需要让Content区域优先占据其最大宽度，Wide区域仅使用剩余可用空间。

修改后的解决方案 #

.my-grid {
  --const-content-max: 77rem; /* Content区域最大宽度 */
  --gutter: 4rem; /* 两侧内边距 */
  --wide-max: calc((90rem - var(--const-content-max)) / 2); /* Wide区域最大宽度 */
  
  display: grid;
  /* 核心布局：content优先占满最大宽度，wide允许从最大宽度收缩至0 */
  grid-template-columns: 
    [full-start] var(--gutter) 
    [wide-start] minmax(0, var(--wide-max)) 
    [content-start] minmax(auto, var(--const-content-max)) [content-end] 
    minmax(0, var(--wide-max)) [wide-end] 
    var(--gutter) [full-end];
  /* 限制整体最大宽度 */
  max-inline-size: calc(var(--const-content-max) + var(--wide-max)*2 + var(--gutter)*2);
  /* 屏幕大于最大宽度时居中布局 */
  margin-inline: auto;
}

.block {
  padding: 2rem;
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
}

.block--content {
  grid-column: content;
  background-color: lightgreen;
}

.block--wide {
  grid-column: wide;
  background-color: lightblue;
}

.block--full {
  grid-column: full;
  background-color: lightgray;
}

<div class="my-grid">
  <div class="block block--full">full</div>
  <div class="block block--content">content</div>
  <div class="block block--wide">wide</div>
</div>

关键调整说明 #

1. Content区域优化：使用minmax(auto, var(--const-content-max))，确保Content区域在屏幕宽度足够时保持77rem的最大宽度，仅当Wide区域完全收缩后才会随屏幕缩小。
2. Wide区域适配：通过minmax(0, var(--wide-max))让Wide区域拥有收缩能力，屏幕缩小时从最大宽度逐步收缩至0，优先保障Content区域的宽度需求。
3. 整体尺寸控制：重新计算Grid的最大宽度，确保宽屏时布局达到预期的最大尺寸，同时添加margin-inline: auto让布局在宽屏时居中，提升视觉体验。

内容的提问来源于stack exchange，提问作者Dejan.S