不使用repeat()函数如何实现CSS Grid响应式断点布局

完全可以不借助repeat()实现你需要的效果，你之前的写法失效原因很明确：
repeat(auto-fit/auto-fill)的自动换行逻辑仅在其作为网格容器唯一的弹性列定义片段时才会触发，当你在它前面拼接了固定的minmax(1000px, 2fr)列轨道后，浏览器会直接按显式定义的2列渲染，不会执行自动断行计算，最终表现和直接写grid-template-columns: 2fr 1fr没有区别。
而全量使用repeat(auto-fit, minmax(500px, 1fr))的问题是，所有自动生成的列轨道弹性权重完全一致，自然无法实现2:1的宽度分配比例。

实现代码 #

不需要复杂的函数hack，用基础Grid属性搭配一行断点判断即可，逻辑清晰易维护：

.grid-wrap {
  display: grid;
  gap: 12px; /* 按需调整元素间距 */
  /* 宽屏默认2:1宽度分配 */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.grid-wrap > div:first-of-type {
  min-width: 1000px; /* 第一个元素最小宽度限制 */
}
.grid-wrap > div:last-of-type {
  min-width: 500px; /* 第二个元素最小宽度限制 */
}
/* 断点值为两个元素最小宽度之和，小于该值时自动切换单列 */
@media (max-width: 1500px) {
  .grid-wrap {
    grid-template-columns: 1fr;
  }
}

HTML结构无需改动，和你原有写法一致：

<div class="grid-wrap">
  <div>Div 1</div>
  <div>Div 2</div>
</div>

效果说明 #

• 视口宽度大于1500px时，两个元素严格按照2:1比例分配宽度，同时不会小于各自设定的最小宽度阈值
• 视口宽度小于等于1500px时，容器自动切换为单列布局，第二个元素自动换行到下方，两个元素均撑满容器可用宽度
• 后续如果调整元素最小宽度，只需要同步修改媒体查询断点为两个最小宽度的和即可，没有隐式逻辑，维护成本很低

如果一定要完全不写媒体查询实现，可以通过min()函数搭配网格自动流规则做无断点适配，但可读性和可维护性远不如上述方案，生产环境不推荐使用。

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