如何实现不同宽度列的CSS响应式网格？无需媒体查询适配小屏换行布局

嘿，这个问题我之前折腾过好一会儿，纯Grid完全能搞定，不用媒体查询也没问题！

你之前用repeat(auto-fit, 1fr)能搞定等宽列，是因为所有列的尺寸规则一致，但不等宽的情况，repeat就不太适用了——它只能重复相同的轨道配置。而你试的auto或者minmax(400px,1fr)要么没法维持比例，要么强制等宽，自然达不到预期。

下面给你两种纯Grid的实现方案，都能满足你的需求：

方法一：Grid轨道+子元素尺寸约束 #

这种方式最直观，先给Grid设置两个自动宽度的轨道，再给每个列设置最小宽度和最大宽度的约束，让它们在空间足够时保持30%/70%，空间不足时自动换行：

.grid-container {
  display: grid;
  grid-template-columns: auto auto; /* 两个自动宽度的轨道 */
  gap: 1rem; /* 可选：列之间的间距 */
}

.grid-column-1 {
  min-width: 300px; /* 小屏幕下的最小宽度，可按需调整 */
  max-width: 30%; /* 大屏幕下的最大宽度 */
}

.grid-column-2 {
  min-width: 400px; /* 小屏幕下的最小宽度，可按需调整 */
  max-width: 70%; /* 大屏幕下的最大宽度 */
}

原理很简单：当容器宽度足够容纳两个列的最小宽度总和（300px+400px=700px）时，两个列会并排显示，分别遵守30%和70%的最大宽度；当容器宽度小于这个阈值时，第二个列的最小宽度需求无法在同一行满足，Grid就会自动把它换到下一行，此时每个列的auto轨道会填满整个容器宽度，完美适配小屏幕。

方法二：直接在Grid轨道上配置minmax #

如果你不想给子元素单独写样式，也可以直接在Grid轨道上定义尺寸规则：

.grid-container {
  display: grid;
  /* 第一列：最小300px，最大占30%；第二列：最小400px，最大占70% */
  grid-template-columns: minmax(300px, 30%) minmax(400px, 70%);
  gap: 1rem;
}

不过这里有个小细节：当容器宽度刚好在700px左右时，可能会出现列被挤压的情况（因为两个轨道的最小宽度总和是700px）。如果想让它在宽度不足时直接换行，你可以给容器加上grid-auto-flow: row，不过实际测试中，大部分浏览器会自动在轨道总最小宽度超过容器宽度时触发换行，这个配置可以作为兜底。

另外，你可以根据自己的需求调整min-width的值（比如把300px改成280px），确保在不同小屏幕设备上都有良好的显示效果。如果想让换行的阈值更灵活，也可以用clamp()函数替换固定的最小宽度，比如min-width: clamp(280px, 90vw, 300px)，这样在超小屏幕下也能留出左右边距。

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