如何在css grid中快速创建九宫格图片墙_利用repeat函数简化声明-css教程-PHP中文网

九宫格布局用display: grid配合grid-template-columns: repeat(3, 1fr)和grid-template-rows: repeat(3, 1fr)即可实现，需注意显式定义行列、合理设置gap与object-fit，响应式可用repeat(auto-fit, minmax(300px, 1fr)))。

如何在css grid中快速创建九宫格图片墙_利用repeat函数简化声明

用 `repeat(3, 1fr)` 一行搞定三行三列布局

九宫格本质就是 3×3 的等分网格，grid-template-columns 和 grid-template-rows 都设为 repeat(3, 1fr) 就够了，不用写六次 1fr。浏览器会把容器均分成三份，每份自动撑满可用空间。

常见错误是只设列不设行，导致图片堆成一长条；或者误用 repeat(9, 1fr)，那会生成 9 列 1 行，不是九宫格。

display: grid 必须加在父容器上，子元素（图片）默认按流式顺序填入网格单元格
如果图片数量少于 9，空单元格仍会保留，不会自动塌陷——这是预期行为，不是 bug
想让图片铺满单元格，给图片加 width: 100%; height: 100%; object-fit: cover;

图片宽高比不一致？用 `grid-auto-rows` 统一高度

实际项目里图片原始尺寸千差万别，光靠 1fr 不能保证每行高度一致，容易出现错位。这时该用 grid-auto-rows 强制所有行等高。

比如设 grid-auto-rows: 200px，每行固定 200px 高，图片靠 object-fit 裁剪填充；设 grid-auto-rows: minmax(200px, 1fr) 更灵活，最小 200px，剩余空间再均分。

grid-template-rows: repeat(3, 1fr) 是显式定义 3 行，而 grid-auto-rows 管的是隐式行（超出 3 个子项时才触发）
九宫格固定 9 图，推荐直接用 grid-template-rows: repeat(3, 200px)，更直白可控
注意单位：用 px 或 rem 是固定高，用 1fr 仍会受内容影响，不一定真“等高”

响应式断点下改列数？避免重复写 `repeat()`

移动端想变 2 列或 1 列，别在每个媒体查询里重写整套 grid-template-columns，用 repeat(auto-fit, minmax(300px, 1fr))) 更省事。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

这个写法的意思是：“尽可能多放宽度 ≥300px 的列，每列等宽填满容器”。屏幕缩小时，列数自动从 3→2→1，无需手动维护断点。

必须搭配 grid-auto-flow: dense 才能避免空单元格打乱顺序（尤其当图片数量不是 3 的倍数时）
auto-fit 和 auto-fill 行为不同：auto-fit 会合并空轨道，auto-fill 保留空轨道，九宫格场景优先选 auto-fit
如果坚持固定 3 列（如后台管理页），就老实用 repeat(3, 1fr) + 媒体查询，别硬套响应式写法