Grid网格布局是CSS中强大的二维布局工具，通过grid-template-columns属性可以定义网格的列数和每列的宽度。要实现不同屏幕展示不同列数，核心思路是结合媒体查询，在不同屏幕宽度区间下重新设置grid-template-columns的值，让布局自动适配屏幕尺寸。
实现基础：Grid布局与媒体查询基础
首先我们需要了解两个核心知识点，Grid布局的grid-template-columns属性用于指定网格容器的列轨道大小，而媒体查询可以根据设备的屏幕宽度、分辨率等特征应用不同的CSS样式，二者结合就能实现列数的动态切换。
Grid布局基础用法
开启Grid布局只需要给容器设置display: grid，然后通过grid-template-columns定义列，比如下面的代码会创建一个3列，每列等宽的网格：
.container {
display: grid;
/* 3列，每列占1份可用空间 */
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
媒体查询基础语法
媒体查询的基本语法是@media 媒体类型 and (条件) { 样式规则 }，常用的条件是max-width（最大宽度，小于等于该宽度时生效）和min-width（最小宽度，大于等于该宽度时生效），比如下面的规则会在屏幕宽度小于等于768px时生效：
@media screen and (max-width: 768px) {
/* 屏幕宽度<=768px时的样式 */
.container {
grid-template-columns: repeat(2, 1fr);
}
}
完整实现步骤
实现不同屏幕不同列数的完整流程可以分为三步：
- 第一步：定义基础Grid容器，设置默认屏幕下的列数
- 第二步：添加多个媒体查询规则，针对不同屏幕区间设置对应的列数
- 第三步：测试不同屏幕尺寸下的展示效果，调整断点和列数适配需求
完整代码示例
下面是一个完整的示例，实现了大屏幕3列、中等屏幕2列、小屏幕1列的适配效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid不同屏幕不同列数示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
/* 默认大屏幕：3列 */
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.item {
background-color: #f0f0f0;
padding: 30px;
text-align: center;
border-radius: 8px;
}
/* 中等屏幕：宽度<=1024px时，2列 */
@media screen and (max-width: 1024px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
/* 小屏幕：宽度<=768px时，1列 */
@media screen and (max-width: 768px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
</div>
</body>
</html>
注意事项
在实际使用中需要注意几个问题：
- 媒体查询的断点需要根据实际设计需求设置，不要盲目照搬常见断点，优先适配目标用户的设备尺寸
- 如果使用
min-width作为条件，需要注意规则的书写顺序，小的min-width值要写在前面，避免样式被覆盖 - 除了列数，还可以结合媒体查询调整
gap（网格间距）、grid-template-rows等其他Grid属性，实现更完整的响应式效果
提示：如果需要在多个地方复用相同的媒体查询列数规则，可以把对应的Grid样式封装成CSS类，在不同容器中按需使用，减少重复代码。
Grid网格布局media_querygrid-template-columns响应式布局修改时间：2026-06-09 13:57:23