你是不是也曾为不同屏幕的适配而头疼，写了一大堆媒体查询（@media）？

分享一个非常实用的CSS Grid技巧，只需要两行代码，就能让布局自动适应各种屏幕宽度，省去复杂的断点计算。

这个技巧的核心就是 auto-fit 和 minmax() 的结合使用。

先看效果，再讲原理。假设我们有一组卡片，希望它们能自动适应屏幕宽度，每张卡片最小200px，最大占满可用空间，并且自动换行：

.container {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
是的，就这两行（严格来说是一行关键代码）。让我们看看它做了什么：
<!-- HTML结构很简单 -->
    <div class="container">
  <div class="card">卡片1</div>  
  <div class="card">卡片2</div>  
  <div class="card">卡片3</div>  
<!-- 更多卡片 --></div>


原理拆解：

  1. repeat(auto-fit, ...)
    auto-fit 的意思是“自动适配”。它会根据容器宽度，自动调整网格列数，尽量填满一行。

  2. minmax(280px, 1fr)
    这是每列宽度的规则：

    • 最小 280px：保证每列至少这么宽

    • 最大 1fr：可以平分剩余空间（fr是网格的等分单位）

效果就是：

  • 屏幕很宽时，会自动排成多列（每列等宽，大于280px）

  • 屏幕变窄时，列数自动减少

  • 窄到放不下两列时，自动变成单列

  • 整个过程无需任何媒体查询

auto-fit 和 auto-fill 的区别

这两个参数很相似，但有一个关键差异：

  • auto-fit：会“收缩”空白的列，让内容占满可用空间

  • auto-fill：会“保留”空白列，即使没有内容也占位置

看个直观的例子：

/* auto-fill：总保持可能的列数，可能有空白 */

.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
/* auto-fit：让已有内容伸展填满空间 */
.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}


假设容器能放5列，但你只有3个元素：

  • auto-fill：会保留5列的宽度，3个元素在前3列，后2列为空白

  • auto-fit：会把后2列“折叠”，让前3列伸展填满整行

大多数情况下，用 auto-fit 更符合我们的需求。

实际应用场景

  1. 相册/商品列表

.gallery {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
  gap: 20px;  /* 控制间距 */
}


  1. 仪表盘卡片

.dashboard {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
  gap: 16px;
}


  1. 响应式按钮组


.button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

浏览器兼容性

这个方法在现代浏览器中支持良好（Chrome、Firefox、Safari、Edge等），但对IE不友好。如果不需要支持IE，可以放心使用。

总结

grid-template-columns: repeat(auto-fit, minmax(宽度, 1fr)) 这个组合：

  • 简洁高效，两行代码替代多段媒体查询

  • 灵活自适应，从手机到4K屏幕都能很好应对

  • 易于维护，修改只需调整一个数值

当然，它不能解决所有布局问题，但在处理“等宽卡片自适应排列”这类场景时，确实是个利器。

下次做响应式布局时，不妨试试这个方法。你会发现，原来自适应可以这么简单。