CSS Grid布局需求：双列自适应，小于150px时切换单列

以下两种方案均无需媒体查询，可实现默认两列、占满可用宽度，且仅当盒子宽度不足150px时自动切换为单列的布局需求。

Grid 实现方案 #

.cont {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(150px, calc((100% - 20px) / 2)));
}

.box {
  background-color: grey;
}

原理说明 #

• repeat(auto-fit, ...)：自动根据容器宽度调整列数，避免固定列数导致的布局溢出。
• minmax(150px, calc((100% - 20px) / 2))：
  • 容器宽度足够时，每列宽度为 calc((100% - 20px) / 2)，均分容器宽度（扣除间隙），保持两列布局。
  • 容器宽度缩小到无法容纳两列150px宽度加间隙时，calc(...) 结果小于150px，minmax 取150px作为列宽，auto-fit 自动切换为单列，列宽占满容器。

Flex 实现方案 #

.cont {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  background-color: grey;
  flex: 1 1 calc((100% - 20px) / 2);
  min-width: 150px;
}

原理说明 #

• flex-wrap: wrap：允许盒子在容器宽度不足时换行。
• flex: 1 1 calc((100% - 20px) / 2)：
  • flex-basis: calc((100% - 20px) / 2)：默认状态下每个盒子占容器宽度的一半（扣除间隙），形成两列布局。
  • flex-grow: 1：确保单列时盒子占满容器可用宽度。
  • flex-shrink: 1：允许盒子在必要时缩小，但 min-width:150px 会阻止其宽度小于150px，触发换行切换为单列。

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