css响应式布局display: grid

Jiafeng 2025-09-22 21:34:47

分类： HTML/CSS 16 0

本文转自掘金 https://juejin.cn/post/7547728016069656627

你是不是有过这样的经历：辛辛苦苦做好的网页，在电脑上看起来整整齐齐，但一放到手机或平板上，布局就变得乱七八糟，要么挤成一团，要么空白一大片。

然后你上网一搜解决办法，全都是让你写一堆看起来超复杂的 @media（媒体查询）代码，不同的屏幕尺寸就要写不同的样式，光是想想就头大。

别担心！其实，只需要 2 行 CSS 代码，就能让你的一排排卡片、图片、内容块自动适应屏幕宽度，再也不用写繁琐的媒体查询了！

这就是 CSS Grid 的 auto-fill 和 auto-fit 属性。

先想再学

假设我们要做一排卡片，每个卡片最小宽度是 200px。我们希望：

屏幕很宽时，自动显示很多列，并且每列平均分配剩余空间。
- 屏幕变窄时，卡片自动换行，保证布局不会乱。
以往：可能需要写 3-4 个媒体查询，分别针对手机、平板、电脑。

现在：只需要给卡片的爸爸（父容器）加上 2 行 CSS！
```
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px; /* （可选）增加卡片之间的间距 */
}
```
把这段代码放到样式里，无论你怎么拉浏览器的窗口，卡片都会自动调整排列

代码拆解：理解每部分的作用

这行核心代码 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 看起来有点复杂，我们把它拆开揉碎了讲，保证你能懂！

display: grid：将元素定义为网格容器

grid-template-columns：定义网格的列数和每列的宽度

repeat() ：重复函数，避免重复书写相同的模式

auto-fit：自动调整网格轨道数量以填充容器

minmax(200px, 1fr) ：定义每列的最小和最大宽度

minmax 函数详解
minmax()函数接受两个参数：最小值和最大值。例如：

minmax(200px, 1fr)表示列宽最小 200px，最大为 1fr（剩余空间的等分）
- minmax(auto, 300px)表示高度自适应内容，但不超过 300px
fr 单位的作用

fr（fraction）单位按比例分配剩余空间。例如：

grid-template-columns: 2fr 1fr 1fr 会创建三列，比例为 2:1:1

auto-fill vs auto-fit：关键区别

虽然两者都用于自动创建网格，但它们的行为有重要区别：

特性	auto-fill	auto-fit
行为特点	保留空轨道，保持网格结构，内容不拉伸	折叠空轨道，让内容拉伸
内容拉伸	不拉伸内容	拉伸内容填满容器
适用场景	需要固定网格数的布局(日历、表格、固定布局)	需要内容自适应填满的布局(卡片、图片)

auto-fill (填充模式) ：它会老老实实地生成 10 个位置，5 个有内容块，另外 5 个是空的但占着位置。这样你的 5 个块宽度就是固定的 200px，不会变。

auto-fit (适配模式) ：它很聪明！它发现后面 5 个位置是空的，就会把它们折叠掉，然后让已有的 5 个内容块自动拉伸变宽，平分一整行的空间。

auto-fit和auto-fill 对比演示

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>auto-fit 和 auto-fill 对比演示</title>
<style>
.container {
display: grid;
gap: 16px; / 设置网格间隙 /
}
/ auto-fill 效果 - 保留空位 /
.container.fill {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
background-color: #ffe6e6; / 浅红色背景，方便看容器范围 /
}
/ auto-fit 效果 - 拉伸填充 /
.container.fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
background-color: #e6ffe6; / 浅绿色背景 /
}
.item {
background-color: rgb(141, 141, 255);
height: 100px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h2>auto-fill (保留空轨道，适合日历/表格)</h2>
<div class="container fill">
<div class="item">卡片1</div>
<div class="item">卡片2</div>
<div class="item">卡片3</div>
</div>


下次当你再需要做响应式布局时，别第一时间就想着一堆媒体查询了。试试这个，让它帮你自动搞定，省时又省力！

## Auto-Fit vs Auto-Fill 演练场

![Auto-Fit vs Auto-Fill演练场](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9932e963b73c4521929c4e0152f5d4df~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uvSGFyZHk=:q75.awebp?rk3s=f64ab15b&x-expires=1758620002&x-signature=j2C%2FB7rqXomApOYBOrkFVlUmrE8%3D)

---

```html





Auto-Fit vs Auto-Fill 可视化对比




    
        Auto-Fit vs Auto-Fill 可视化对比
        通过实时演示直观了解CSS Grid中auto-fit和auto-fit属性的区别，以及它们如何影响响应式布局
    

    
        
            容器宽度控制
            
                窄
                
                宽
                800px
            
        

        
            卡片数量
            
                少
                
                多
                6 卡片
            
        

        
            
            
        
    

    
        
            
                Auto-Fill 布局
                保留空轨道，适合需要固定网格结构的布局
            
            
                
                    1
卡片
                    2
卡片
                    3
卡片
                    4
卡片
                    5
卡片
                    6
卡片
                
            
        

        
            
                Auto-Fit 布局
                折叠空轨道，内容拉伸填充可用空间
            
            
                
                    1
卡片
                    2
卡片
                    3
卡片
                    4
卡片
                    5
卡片
                    6
卡片
                
            
        
    

    
        理解 Auto-Fit 和 Auto-Fill
        CSS Grid布局中的auto-fit和auto-fill关键字允许我们创建灵活的响应式布局，而无需编写复杂的媒体查询。它们都用于repeat()函数中，但与minmax()结合使用时，行为有所不同。

        
            grid-template-columns: repeat(, minmax(150px, 1fr));
        

        
            
                ↔️ Auto-Fill 行为
                Auto-fill会尽可能多地创建网格轨道，即使没有网格项填充它们。空轨道仍然占用空间，影响布局。
                
                    保持网格结构完整
                    空轨道保持最小宽度
                    适合需要严格对齐的布局
                    在内容数量变化但网格结构需要保持不变时非常有用
                
            

            
                ↕️ Auto-Fit 行为
                Auto-fit会折叠任何空轨道，并拉伸现有网格项以填充可用空间。它更注重内容的填充而非网格结构的保留。
                
                    折叠空轨道
                    内容拉伸填满容器
                    适合卡片、画廊和内容块布局
                    在希望内容充分利用可用空间时非常有用