如何限制CSS Grid列数在1-3之间并保持动态适配？

要让Grid布局的列数在1到3之间动态适配，核心是给每列设置一个「最低阈值宽度」——当屏幕能放下3个该阈值宽度的列时，就显示3列；宽度不够时自动减少到2列，直到最后收缩为1列，同时保证列宽不会挤压内容。

直接修改grid-template-columns的参数就能实现，代码如下：

.grid {
  display: grid;
  /* 核心逻辑：每列最小宽度取「内容最小宽度」和「三列布局时的均分宽度」的较大值 */
  grid-template-columns: repeat(auto-fit, minmax(max(min-content, calc((100% - 80px)/3)), 1fr));
  gap: 40px;
}

拆解逻辑： #

• calc((100% - 80px)/3)：3列布局会有2个gap（每个40px），总宽度减去这两个gap的占用空间后均分3份，得到三列时每列的最小宽度。
• max(min-content, ...)：确保列宽不会小于内容本身的最小宽度，避免内容被挤压变形或溢出。
• auto-fit：自动根据屏幕宽度调整列数，当无法容纳3列时，自动合并为2列或1列，同时让列宽拉伸填充剩余空间。

如果需要更灵活的可维护性，用CSS变量封装参数会更方便：

.grid {
  --grid-gap: 40px;
  --max-columns: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(min-content, calc((100% - (var(--max-columns) - 1)*var(--grid-gap))/var(--max-columns))), 1fr));
  gap: var(--grid-gap);
}

后续要调整最大列数或gap大小，只需要修改对应的变量值即可，不用动核心计算逻辑。

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