两行CSS，让你的布局自动适应任何屏幕
你是不是也曾为不同屏幕的适配而头疼，写了一大堆媒体查询（@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>
原理拆解：
repeat(auto-fit, ...)
auto-fit的意思是“自动适配”。它会根据容器宽度，自动调整网格列数，尽量填满一行。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 更符合我们的需求。
实际应用场景
相册/商品列表
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px; /* 控制间距 */
}仪表盘卡片
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}响应式按钮组
.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屏幕都能很好应对
易于维护，修改只需调整一个数值
当然，它不能解决所有布局问题，但在处理“等宽卡片自适应排列”这类场景时，确实是个利器。
下次做响应式布局时，不妨试试这个方法。你会发现，原来自适应可以这么简单。
发表评论