产品与设计 · 布局基础

网格布局Grid

用轨道、间距、跨格和 auto-fit + minmax 自适应策略组织二维内容，让不同容器宽度下的格子保持可读。

调轨道、间距、宽度和跨格，看格子怎么排

一张放进网格的 8 格内容。切固定列数或自适应、拖 gap 与容器宽度、再开跨格，格物件的位置、列数和轨道 CSS 会跟着变。

概览

功能

定价

FAQ

案例

支持

更新

联系

grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;

固定 3 列：gap 12px，容器 560px，每列约 179px。对照：把容器宽度拖窄，看每列被压缩、间距占比被放大。

演示里的轨道表达式和格子排布对应 Grid 的几个核心原语。

grid-template-columns / rows 定义轨道：演示切列数或改容器宽度时，就是这条表达式在变。固定写 repeat(N, 1fr)，自适应写 repeat(auto-fit, minmax(M, 1fr))。
gap 是轨道间距，不是 margin：拖 gap 滑块，只改格之间距离，不会像 margin 那样在容器边缘多出一圈、造成末行错位。
auto-fit + minmax 自动折叠：minmax 的最小值是「每格最少多宽」，auto-fit 按它把可用宽度填满再换行，所以窄容器自动少列、宽容器自动多列。
grid-column / grid-area 跨格定位：开跨格后，1 号卡横跨两列；二维网格能让一个物件同时控制列和行的位置，这是 flex 的一维排列做不到的。
repeat() 是轨道简写：repeat(3, 1fr) 比 1fr 1fr 1fr 短；minmax(0, 1fr) 里的 0 防止内容把轨道撑出容器。

按「行和列是否都要对齐」「容器宽度是否变化」来选，别把它当万能布局。

用 Grid：内容需要同时按行和列对齐，比如卡片矩阵、表单标签+输入、仪表盘面板、带跨格英雄区的页面骨架。
用 auto-fit + minmax：卡片数量或容器宽度会变化，又不想手写一堆断点；让最小列宽保护可读性。
改用 flex：只需一行横向或一列纵向排开、按内容分配空间，不必强套二维网格。
不要用 Grid 当间距系统：区块之间的统一间距仍走 space / margin / padding；Grid 管「格子怎么排」，不管「区块之间多远」。

四步把一个网格说清楚，不靠「看起来排好了」。

先定列轨道：已知断点写 repeat(N, minmax(0, 1fr))；宽度会变写 repeat(auto-fit, minmax(M, 1fr))，M 是每格最小可读宽度。
用 gap 设行列间距，别用 margin 替代，避免末行错位。
需要跨格或定位时，用 grid-column / grid-row 或 grid-area 把物件放到指定轨道；英雄区跨多列、侧栏跨多行。
缩窄容器验收：列数是否合理折叠、每列是否仍可读、跨格物件在窄屏是否退化成普通格。

容器都是 360px、同一组卡片，只改轨道策略一处。

正例 · auto-fit + minmax(110px, 1fr)grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));

容器从 720 缩到 360 再到 280，列数自动 6 → 3 → 2，每列始终 ≥110px，标题不挤爆、不写断点。

反例 · 固定 4 列grid-template-columns: repeat(4, minmax(0, 1fr));

容器缩到 360 时每列约 78px，标题疯狂换行、按钮挤在一起；窄屏不可读，得额外加断点补救。

一组相册卡片要在手机、平板、桌面间随容器宽度自动改变列数，又不想写一堆媒体查询。哪条轨道策略最合适，为什么？

术语的技术定义和行为以这些一手或权威资料为准。

和本知识点经常一起出现的概念。