CSS Grid 网格布局实战：从基础语法到响应式卡片列表

排版卡片列表时，很多人的做法是先写死三列，再用 margin 挤出间距，最后发现窄屏下卡片被压扁、长标题把网格撑破。CSS Grid 的 grid-template-columns、minmax() 与 auto-fit 组合起来，能在不写一行媒体查询的前提下做出自适应响应式布局。

一、Grid 容器与轨道定义

1. display: grid 与显式轨道

给父容器加 display: grid 后，直接子元素自动成为网格项，按 grid-template-columns 声明的轨道依次排布。repeat(3, 1fr) 表示重复三次 1fr，即三等分可用宽度。

.card-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

1fr 是剩余空间的一份，会吸收 padding 与边框之外的宽度，列宽始终贴合容器。gap: 24px 同时作用于行与列，替代过去给卡片写 margin 再给容器负边距补偿的老办法。

2. 用 grid-auto-rows 统一行高

只声明列时，行轨道由内容撑开，行高参差不齐。补一条 grid-auto-rows: minmax(180px, auto)，含义是行高至少 180px、内容更高时自动扩展，卡片能对齐，长文案也不会被裁掉。

二、响应式网格：auto-fit 与 minmax

1. 一行声明替代媒体查询

把固定列数换成按最小宽度自动排列：

.card-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

含义是每列最小 260px、最大占一份剩余空间，能塞几列就塞几列。1200px 宽时排 4 列，800px 时自动变 3 列，手机 375px 下落成 1 列，全程不需要断点。需要按设计稿锁死列数时才补一条 @media 覆盖。

2. auto-fit 与 auto-fill 的区别

两者都按最小宽度重复轨道，差别在剩余空轨道怎么处理：auto-fill 保留空轨道，卡片不拉伸；auto-fit 把空轨道折叠为 0，已有卡片平分整行。列表卡片希望「少的时候铺满」选 auto-fit；希望卡片宽度始终一致则选 auto-fill。

3. 最小宽度取值依据

minmax() 里的 260px 应由卡片内容决定：文字区最窄能容纳的行宽加上内边距与边框。取值偏小会让列数过多、文字频繁折行；取值偏大则手机上容易出现横向滚动条。

三、间距控制与内容溢出

1. 内容溢出改 minmax(0, 1fr)

这是 Grid 最容易踩的坑：1fr 的最小值不是 0 而是 auto，等于「不小于内容固有宽度」。卡片里放长 URL 或宽图时整列会被顶宽，网格溢出容器。

.card-list { grid-template-columns: repeat(auto-fit, minmax(260px, minmax(0, 1fr))); }
.card-list > .card { min-width: 0; }

2. 图片与文本的收缩处理

网格项内的图片统一写 width: 100%; height: auto; display: block，块级化能去掉行内元素下方的基线空隙；超长英文串用 overflow-wrap: anywhere 断行，或配 white-space: nowrap 加省略号截断。

关键配置提示

• repeat(auto-fit, minmax(260px, 1fr)) 是零媒体查询响应式布局的核心写法
• 网格项内容溢出时，把 1fr 改为 minmax(0, 1fr) 或给项目加 min-width: 0
• 间距统一用 gap，不要再用 margin 叠加