css grid布局响应式列数自动调整-css教程-PHP中文网

css grid布局响应式列数自动调整

P粉602998670

发布： 2025-10-20 19:35:01

原创

836人浏览过

使用 auto-fit 和 minmax 可实现 CSS Grid 布局的自动列数调整，.grid-container 设置 display: grid 和 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，minmax 定义每列最小 200px、最大 1fr，auto-fit 自动填充可用空间并拉伸已有列，相比 auto-fill 更适合响应式；常用于卡片布局，如 .card-grid 设 minmax(250px, 1fr) 实现不同屏幕下显示 1 到多列，需注意容器宽度和 gap 间距设置。

css grid布局响应式列数自动调整

在使用 CSS Grid 布局时，想要实现列数根据容器宽度自动调整（响应式），可以结合 minmax() 和 auto-fit 或 auto-fill 来实现。这种方法无需媒体查询就能让网格列数自适应屏幕尺寸。

使用 grid-template-columns + minmax 实现自动列数调整

核心是利用 repeat() 函数配合 auto-fit 或 auto-fill，并设置最小和最大列宽：

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

说明：

minmax(200px, 1fr)：每列最小 200px，最大为 1fr（平均分配剩余空间）
auto-fit：将可用空间均匀分配给所有列，自动换行并填充行宽
auto-fill：与 auto-fit 类似，但会保留空轨道（即使没有内容）

auto-fit 与 auto-fill 的区别

两者都会自动计算可容纳的列数，但行为略有不同：

立即学习“前端免费学习笔记（深入）”；

v3.0 S-CMS企业建站系统(含小程序)

S-CMS政府建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用ASP+ACCESS/MSSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建

258

查看详情

使用 auto-fit：当子项不足填满所有轨道时，已有的列会拉伸以填满容器
使用 auto-fill：即使没有足够子项，也会创建等宽的空轨道

一般推荐使用 auto-fit，更适合响应式布局。

常见应用场景示例

比如做一个响应式的卡片网格：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}
.card {
  background: #f4f4f4;
  padding: 20px;
  text-align: center;
}

在手机上可能只显示一列，在平板上两列，桌面则三列或更多，完全由容器宽度决定。