前端 CSS Grid 二维布局设计

CSS Grid 面向行和列两个方向的布局，适合页面框架、仪表盘和内容卡片区域。与依赖项目顺序的布局相比，Grid 可以显式声明轨道和区域，让容器结构更容易阅读和调整。

一、先定义轨道，再放置内容

grid-template-columns 和 grid-template-rows 定义显式轨道。fr 单位表示分配剩余空间的比例，minmax 可以限制轨道的最小和最大尺寸。

.dashboard {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 20px;
}

主内容列使用 minmax(0, 1fr) 可以避免长内容的最小尺寸把整个网格撑宽。对于更简单的等宽卡片，可以使用 repeat 和自动填充来适配可用宽度。

二、用区域表达页面结构

grid-template-areas 可以把布局区域写成接近页面结构的声明。区域名称应表达职责，而不是仅使用无意义编号。

.page {
    display: grid;
    grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
    grid-template-columns: 240px minmax(0, 1fr);
}

响应式调整时可以重新定义区域排列，不必复制多套 DOM。视觉重排仍不能替代合理的文档顺序和键盘顺序。

三、理解自动放置

没有显式指定网格位置的项目会按自动放置规则进入网格。稀疏放置保持项目原有顺序；dense 模式可能回填前面的空洞，使视觉顺序与文档顺序不同。

对内容阅读顺序重要的页面，应谨慎使用 dense。显式跨行跨列可以提高布局密度，但复杂规则也会增加维护成本。

四、控制轨道和内容溢出

自动轨道会受内容最小尺寸影响，长文本或大图可能撑开容器。需要允许轨道收缩时，设置零最小值或适当的 minmax 范围；需要裁剪或滚动时，明确声明对应行为。

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

这类自适应写法减少了断点数量，但仍要在最窄设备和最长内容下检查实际结果。

五、对齐容器与项目

justify-items 和 align-items 控制单元格内项目对齐，justify-content 和 align-content 控制整个网格轨道组的对齐。项目自身还可以单独覆盖对齐方式。区分“项目在格子里”和“轨道在容器里”，能减少属性选错。

六、Grid 与 Flex 的配合

Grid 负责整体二维区域，局部工具栏和表单行仍可由 Flex 排列。布局工具可以组合，不需要全站只选一种。选择时看布局关系，而不是看代码流行程度。

实践排查顺序

• 网格被长文本撑宽时，检查轨道的最小内容尺寸；将可伸缩列写成带零最小值的范围，通常比隐藏整个容器溢出更准确。
• 卡片列数变化不自然时，观察容器可用宽度、最小卡片宽度和间距，再决定用断点重排还是自动填充轨道。
• 网格区域布局难以维护时，检查区域名称是否表达页面职责，并确保每行列数一致。区域声明复杂到无法一眼看懂时，拆成局部容器更清晰。
• 自动放置产生空洞时，确认是否需要显式行列位置。不要为了填满空洞启用 dense 后忽略视觉顺序和辅助技术顺序差异。
• 响应式改变列数后还要检查内容顺序、焦点顺序和滚动位置，避免布局看起来正确但操作路径不合理。

复核场景

仪表盘可用 Grid 定义侧栏和主内容列，主内容内部再使用独立网格排列卡片。小屏时重新定义整体区域，让侧栏变成顶部筛选区，而不是仅把列宽缩小。给卡片内容设定可收缩轨道，长表格单独滚动，避免一个数据单元把整张仪表盘撑宽。

场景取舍补充

Grid 区域名让整体结构更清晰，但不适合把每个小装饰都变成独立网格区域。组件内部只有单轴排列时仍可用 Flex，组合布局时让每个容器只管理自己负责的行列关系。

复杂仪表盘还应测试用户缩放和动态内容更新；轨道尺寸若只适配固定数据量，新增列或长标题很容易重新引入横向溢出。

网格区域调整后复核小屏阅读顺序和交互路径。区域名称表达的是视觉布局，真正的文档与键盘顺序仍由标记结构决定。

七、自动轨道和响应式卡片

repeat、auto-fit 和 minmax 可以根据容器宽度自动决定卡片列数。auto-fit 会折叠空轨道，让现有项目扩展占据空间；auto-fill 则保留可容纳的轨道结构。选择取决于卡片在最后一行是否应扩展，而非哪个关键字更短。

.catalog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

最小尺寸过大时，窄容器会溢出；最小尺寸过小时，卡片内容会挤压。对于非常窄的空间，可用 min() 限制最小轨道不超过容器宽度。

八、显式与隐式网格

模板声明轨道属于显式网格，内容超出声明范围后，浏览器会按自动放置规则生成隐式轨道。grid-auto-rows 和 grid-auto-columns 可以控制这些额外轨道。若某个组件因内容数量变化产生新行，应明确其尺寸，而不是依赖默认 auto 造成高度不可预测。

跨行跨列可以表达仪表盘中的重点卡片，但应限制布局复杂度。项目位置过度绑定内容顺序时，插入新卡片可能导致大片区域重排。

九、嵌套网格与区域对齐

一个网格容器可以包含另一个网格，用于局部布局。若内外网格需要共享列边界，评估目标浏览器支持后可以使用子网格能力；否则可通过共享容器或明确列定义保持对齐。不要为了追求单一网格而把不同职责的组件耦合起来。

十、对齐与无障碍顺序

项目对齐和轨道对齐应分别处理。视觉位置不能改变 DOM 的键盘和阅读顺序。布局密集模式尤其要检查项目是否被视觉移到与文档顺序不同的位置。

实施中的取舍与复核

Grid 的轨道定义应表达内容区域如何随空间变化。固定轨道适合边栏或图标列，弹性轨道适合主内容；minmax 可以同时限制最小可用空间和最大扩张范围。使用自动填充或自动适配重复轨道时，确认最小单元宽度与容器间距在窄视口下仍合理，避免卡片被压成不可读的细列。

隐式轨道通常由超出显式网格的项目创建，可能造成意外宽度或高度。动态内容、错误拼写的网格区域名和列数变化都值得检查；开发工具里的网格覆盖层能直接显示显式与隐式轨道。跨行跨列可以形成清晰布局，但当每个卡片都依赖手工指定位置时，插入新内容会难以维护，宜用规律的自动布局或按内容类型分区。

响应式网格不只调整列数，也要确认内容顺序、焦点顺序和阅读顺序保持一致。视觉上将侧栏移到前方，并不自动改变文档顺序。数据表格和日历可能需要二维定位，但在小屏下可以切换为卡片或横向浏览，并提供清楚的滚动提示。不要通过隐藏关键列而丢失用户完成任务所需的信息。

验证布局时覆盖窄屏、宽屏、缩放、长标题、空数据和内容动态新增。对齐边缘与间距要使用统一设计变量，避免不同页面凭像素微调造成漂移。Grid 与 Flex 可以组合，但每层只承担明确职责；若布局需要大量负边距和特定子项位置修正，通常说明轨道或内容结构尚未表达真实关系。

总结

Grid 通过轨道、区域和自动放置描述二维布局。为内容预留可收缩空间，关注自动放置带来的顺序变化，并让视觉布局与文档语义保持一致，可以构建适配性更好的页面结构。