Grid网格布局不同屏幕展示不同列数怎么做_结合媒体查询调整template-columns-css教程-PHP中文网

Grid网格布局不同屏幕展示不同列数怎么做_结合媒体查询调整template-columns

P粉602998670

发布： 2025-12-21 18:13:08

原创

558人浏览过

用CSS Grid实现响应式列数需结合媒体查询与grid-template-columns：默认单列，481px起设2列，769px起3列，1025px起4列；更优方案是auto-fit+minmax自动适配列数。

grid网格布局不同屏幕展示不同列数怎么做_结合媒体查询调整template-columns

用 CSS Grid 布局实现“不同屏幕宽度显示不同列数”，核心就是配合媒体查询（@media）动态修改 grid-template-columns 的值。

基础 Grid 列数控制

先定义一个默认的网格容器，比如移动端优先设为单列：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

登录后复制

这里 1fr 表示占满一行可用空间，适合手机竖屏。

用媒体查询按断点切换列数

在不同视口宽度下，覆盖 grid-template-columns 即可。常见做法是：

≤ 480px：1 列（默认已设，可不重复写）
481px – 768px：2 列（平板竖屏）
769px – 1024px：3 列（小桌面 / 平板横屏）
≥ 1025px：4 列或 auto-fit + minmax（更灵活）

对应代码：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 481px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

登录后复制

进阶：用 auto-fit + minmax 实现响应式自适应列数

比起固定列数，更推荐下面这种“智能等宽列”写法，它能根据容器宽度自动计算最多放几列，且每列不小于某个最小值：

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

205

查看详情

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

登录后复制

说明：

minmax(250px, 1fr)：每列至少 250px，剩余空间平均分
auto-fit：浏览器自动填充尽可能多的列，空列会被合并
这个写法本身已具备响应能力，通常无需额外媒体查询

如需微调，可在特定断点下改 minmax() 的最小值，例如：

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

登录后复制

注意事项和实用技巧

避免常见坑：

媒体查询断点建议用 min-width，从窄到宽递增写，方便维护
不要混用 float 或 inline-block 等旧布局方式，Grid 容器内子元素默认是网格项
如果内容高度差异大，加 grid-auto-rows: minmax(min-content, max-content) 防止错位
调试时用浏览器开发者工具的“网格检查器”（Grid Inspector），能直观看到轨道线和区域

基本上就这些。用好 repeat()、minmax() 和媒体查询组合，就能让 Grid 在各种屏幕上都排得干净又灵活。

以上就是Grid网格布局不同屏幕展示不同列数怎么做_结合媒体查询调整template-columns的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中svg图片无法显示怎么办？ css中BFC是什么意思 CSS设计模式之ITCSS的介绍 css如何实现自定义的属性 css中BFC布局规则是什么