今天系统复习了 Grid 布局的核心概念包括二维布局模型、轨道尺寸与fr单位、网格线定位、对齐方式、响应式网格以及auto-fill与auto-fit的区别。以下是当天的问答整理与知识总结。一、Grid 基础概念与心智模型1. Grid 与 Flexbox 的区别特性GridFlexbox维度二维同时控制行和列一维主轴方向布局思路先定义网格结构再放置项目根据项目大小沿主轴排列试用场景整体页面布局、复杂网格、图片墙导航栏、列表项、组件内对齐2. 核心术语容器设置 display: grid 的父元素。项目容器的直接子元素。行水平方向的轨道。列垂直方向的轨道。单元格行和列交叉形成的最小单位。网格线分隔轨道的线n 条轨道对应 n1 条网格线。二、轨道尺寸与 fr 单位1. fr 单位fr 表示剩余空间的一份比例用于分配网格容器中未被固定宽度或百分比占用的空间。.grid { display: grid; grid-template-columns: 200px 1fr 2fr; }第一列固定 200px。剩余空间分为 3 份第二列占 1 份第三列占 2 份。2. 与百分比、auto 的区别单位计算依据特点fr剩余空间扣除固定、百分比、内容后灵活分配不产生溢出百分比容器总宽度包含固定宽度和间隙可能因间隙导致溢出auto内容宽度由内容撑开不参与剩余空间分配3. minmax() 函数grid-template-columns: minmax(100px, 1fr) 2fr;第一列最小 100px最大占 1 份剩余空间第二列固定占 2 份。常用于响应式防止内容被压缩。三、网格线定位、span 与网格命名1. 基于网格线编号定位网格线从 1 开始编号。grid-column 和 grid-row 可指定起始/结束线。.item { grid-column: 2 / 4; /* 从第2条列线到第4条列线 */ grid-row: 1 / 3; /* 从第1条行线到第3条行线 */ }使用 span 关键字跨越指定数量.item { grid-column: 2 / span 3; /* 从第2条线开始跨越3列 */ }2. grid-area 简写顺序row-start / column-start / row-end / column-end.item { grid-area: 2 / 3 / 4 / 5; } /* 等价于 */ grid-row-start: 2; grid-column-start: 3; grid-row-end: 4; grid-column-end: 5;3. 网格线命名在定义轨道时给线起名.grid { display: grid; grid-template-columns: [main-start] 1fr [main-end] 1fr; } .item { grid-column: main-start / main-end; }也可以使用 repeat 配合命名如 repeat(3, [col] 1fr)。四、对齐与间距控制1. 项目对齐*-items / *-self属性作用取值示例justify-items所有项目在行轴水平上的对齐start, end, center, stretchalign-items所有项目在列轴垂直上的对齐start, end, center, stretchjustify-self单个项目在行轴上的对齐覆盖 justify-itemsalign-self单个项目在列轴上的对齐覆盖 align-items2. 网格整体对齐*-content当网格总尺寸小于容器时控制整个网格区域的对齐。justify-content水平方向align-content垂直方向取值start, end, center, space-between, space-around, space-evenly3. 与 Flexbox 对齐的对比概念GridFlexbox单行项目对齐justify-items / align-itemsjustify-content / align-items注意Flex 中 justify-content 控制主轴align-items 控制交叉轴整体对齐justify-content / align-content只有单行时 align-content 无效需 flex-wrap: wrap 且多行单个项目覆盖justify-self / align-selfalign-self无 justify-self可用 margin: auto 替代4. 间距 gap.grid { gap: 16px; /* 行和列间距均为16px */ gap: 16px 24px; /* 行间距16px列间距24px */ }gap 只控制项目之间的间距不会导致父容器塌陷比 margin 更简洁。边缘间距需要用父容器的 padding 实现。五、响应式网格与自动布局1. 自动填充 repeat(auto-fill, minmax(200px, 1fr)).grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }浏览器根据容器宽度自动计算能容纳多少列每列最小 200px最大占 1fr。当宽度不足时列数减少每列自动拉伸。2. auto-fill vs auto-fit关键字行为视觉效果auto-fill尽可能多地填充轨道即使没有项目也会保留空轨道右侧可能留白auto-fit填充轨道后拉伸已有项目填满容器无留白项目更宽示例容器宽度 600pxminmax(200px, 1fr)最多能放 3 列。只有 2 个项目时auto-fill仍然保留 3 个轨道位置第 3 个轨道空白。auto-fit只有 2 个轨道每个占 300px。3. 媒体查询适配/* 移动端希望项目尽量宽不留白 */ .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* 桌面端希望保留空白或固定列数 */ media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }4. display: grid 与 inline-griddisplay: grid块级网格容器独占一行。display: inline-grid行内网格容器宽度由内容或 grid-template-columns 决定。今日知识点总结概念要点二维布局先定义网格结构再放置项目适合整体页面、复杂网格fr 单位剩余空间的一份比例与百分比、auto 的区别minmax( )定义轨道的最小/最大尺寸响应式核心网格线定位基于编号或命名使用 span 跨越grid-area 简写对齐方式*-items单元格内对齐、*-content网格整体对齐、*-self单个项目覆盖间距 gap仅控制项目间间距边缘用 padding响应式repeat(auto-fill/auto-fit, minmax(min, max)) 实现弹性网格auto-fill vs auto-fitauto-fill保留空轨道auto-fit拉伸项目填满常见追问1.如何实现一个不等高卡片网格Grid 默认每行高度由该行最高卡片决定无需特殊处理。若想实现瀑布流各卡片高度独立原生 Grid 不支持可用 column-count 或 Masonry 库。2. grid-template-areas 的作用通过命名区域直观定义布局适合固定模板的页面如 header、main、sidebar、footer。.container { display: grid; grid-template-areas: header header sidebar main footer footer; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }3. 如何让某个子项跨越所有列grid-column: 1 / -1;-1 表示最后一条网格线。4. minmax(100px, max-content) 与 minmax(100px, auto) 的区别max-content 取内容的最大宽度不换行auto 受 min-width / max-width 影响通常更常用 auto。