如何用CSS Grid自动列与自动流实现特定元素自适应布局？

基础结构与需求 #

我有一组最多包含5个元素的标记，其中3个为必填元素（始终存在），其余为可选元素：

<div class="container">
  <div class="item-1 mandatory"></div>
  <div class="item-2 optional"></div>
  <div class="item-3 optional"></div>
  <div class="item-4 mandatory"></div>
  <div class="item-5 mandatory"></div>
</div>

核心布局需求：

• item-2、item-3、item-4需始终占满容器宽度，且各占一行
• 若item-1和item-5能同时放入首行且不溢出容器，则两者共享首行（item-1填充剩余空间，item-5保持自身最小宽度）；否则item-5单独占一行

现有尝试方案 #

我尝试了以下代码实现：

<div class="container">
  <div class="item-1 mandatory"></div>
  <div class="item-2 optional"></div>
  <div class="item-3 optional"></div>
  <div class="item-4 mandatory"></div>
  <div class="item-5 mandatory"></div>
</div>

/* 用于演示的颜色标记 */
.item-1 {
  background: lightblue;
}

.item-2, .item-3 {
  background: yellow;
}

.item-4 {
  background: pink;
}

.item-5 {
  background: lightgreen;
}

.container {
  display: grid;
  gap: 0.25rem;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  grid-template-rows: min-content;
  max-width: 100%;
}

.item-1 {
  grid-column-start: 1;
  grid-column-end: -2;
  overflow-wrap: break-word;
}

.item-2, .item-3, .item-4 {
    grid-column: 1/-1;
    max-width: 100%;
}

.item-5 {
  width: min-content;
}

现有方案存在的问题 #

1. 当item-5宽度小于150px时，首行会出现空隙，无法让item-1填充剩余空间
2. 当item-1或item-5过宽时，元素会溢出容器，item-5不会自动下移至单独一行适配空间

解决方案 #

实现思路 #

利用Grid布局的弹性列定义，结合minmax特性控制列宽，同时通过网格定位控制元素位置，无需修改原有HTML结构：

/* 用于演示的颜色标记 */
.item-1 {
  background: lightblue;
}

.item-2, .item-3 {
  background: yellow;
}

.item-4 {
  background: pink;
}

.item-5 {
  background: lightgreen;
}

.container {
  display: grid;
  gap: 0.25rem;
  /* 第一列弹性填充剩余空间，最小宽度150px；第二列自适应内容宽度 */
  grid-template-columns: minmax(150px, 1fr) min-content;
  grid-auto-rows: min-content;
}

/* 让item-2、3、4占满整行 */
.item-2, .item-3, .item-4 {
  grid-column: 1 / -1;
}

/* 默认将item-5放在首行第二列 */
.item-5 {
  grid-column: 2;
  grid-row: 1;
}

/* 当容器宽度不足以放下item-1最小宽度+item-5宽度+gap时，item-5换行占整行 */
@media (max-width: calc(150px + 0.25rem + 200px)) {
  .item-5 {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

优化说明 #

• 若需要动态适配item-5的实际宽度，可通过JavaScript获取item-5的宽度并设置CSS变量--item5-width，替换媒体查询中的固定值
• 若不需要指定item-1的最小宽度，可将minmax(150px, 1fr)改为minmax(0, 1fr)，让布局更灵活

内容的提问来源于stack exchange，提问作者Mr. Hedgehog