编程马·菜鸟教程

Appearance

附录：Grid布局核心知识点汇总 ​

本附录汇总了Grid布局的核心知识点，包括核心术语、属性汇总、常用布局模板、易错点对照表等，方便新手快速查阅和参考。

1. 核心术语速记 ​

术语描述
容器（Grid Container）开启Grid布局的父元素，通过display: grid或display: inline-grid设置
项目（Grid Item）容器内的子元素，自动成为网格项目
网格线（Grid Line）划分网格的横线和竖线，包括行网格线和列网格线，从1开始计数
网格轨道（Grid Track）两条相邻网格线之间的区域，包括行轨道和列轨道
网格单元格（Grid Cell）行轨道与列轨道交叉形成的最小区域，类似表格单元格
网格区域（Grid Area）多个网格单元格合并形成的区域

2. 容器属性汇总 ​

属性描述默认值使用频率
display开启Grid布局block高频
grid-template-columns设置列轨道尺寸none高频
grid-template-rows设置行轨道尺寸none高频
grid-template-areas定义网格区域none中频
gap设置网格间距0高频
row-gap设置行间距0中频
column-gap设置列间距0中频
justify-content网格在容器水平方向的对齐stretch中频
align-content网格在容器垂直方向的对齐stretch中频
justify-items项目在单元格水平方向的对齐stretch中频
align-items项目在单元格垂直方向的对齐stretch中频
grid-auto-flow项目自动排列方式row低频
grid-auto-rows自动创建的行轨道尺寸auto低频
grid-auto-columns自动创建的列轨道尺寸auto低频
grid简写属性-低频

3. 项目属性汇总 ​

属性描述默认值使用频率
grid-column-start项目起始列网格线auto中频
grid-column-end项目结束列网格线auto中频
grid-row-start项目起始行网格线auto中频
grid-row-end项目结束行网格线auto中频
grid-column项目列方向位置和跨度的简写auto / auto高频
grid-row项目行方向位置和跨度的简写auto / auto高频
grid-area项目所在的网格区域auto中频
justify-self单个项目在单元格水平方向的对齐auto低频
align-self单个项目在单元格垂直方向的对齐auto低频
order项目的排列顺序0低频

4. 常用布局代码模板 ​

4.1 响应式卡片网格 ​

css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

4.2 网页整体布局 ​

css
.page-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

4.3 居中布局 ​

css
.center-container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.center-item {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

4.4 不规则网格布局 ​

css
.irregular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 3 / 5;
  grid-row: 1;
}

.item3 {
  grid-column: 3;
  grid-row: 2 / 4;
}

.item4 {
  grid-column: 4;
  grid-row: 2;
}

.item5 {
  grid-column: 1 / 3;
  grid-row: 3;
}

.item6 {
  grid-column: 4;
  grid-row: 3;
}

4.5 表单布局 ​

css
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-submit {
  grid-column: 1 / -1;
  margin-top: 20px;
}

5. 新手易错点对照表 ​

错误类型常见表现原因解决方案
网格不显示项目垂直排列，没有形成网格没有设置grid-template-columns或grid-template-rows确保设置网格轨道尺寸
项目位置错误项目位置与预期不符网格线编号规则不熟悉，span关键字使用不当理解网格线从1开始计数，span表示跨越的轨道数
fr单位计算错误布局错乱，尺寸不符合预期对fr单位概念理解错误，与固定单位混用不当理解fr单位是剩余空间的比例，合理混用不同单位
对齐属性混淆对齐效果与预期不符容器对齐与项目对齐概念混淆理解不同对齐属性的作用，正确使用对齐值
浏览器兼容性问题Grid布局在某些浏览器中不工作使用了不支持Grid布局的旧浏览器检查浏览器支持情况，提供降级方案
项目重叠多个项目占据同一网格区域项目的grid-column和grid-row设置冲突确保每个项目的网格区域不重叠
响应式布局失效在不同屏幕尺寸下布局异常媒体查询设置不当，没有考虑不同屏幕尺寸使用媒体查询和响应式单位，测试不同屏幕尺寸

6. Grid与Flex布局核心区别对照表 ​

对比维度Grid布局Flex布局
布局维度二维（同时控制行和列）一维（只控制行或列）
布局方式通过定义网格轨道来控制布局通过主轴和交叉轴来控制布局
适用场景整体页面布局、复杂网格结构线性排列、组件内部布局
核心属性grid-template-columns, grid-template-rows, grid-template-areasflex-direction, justify-content, align-items
项目定位可以精确控制项目在网格中的位置主要通过顺序和对齐控制项目位置
响应式能力强大，可通过auto-fill/auto-fit和媒体查询实现响应式适中，主要通过媒体查询实现响应式
浏览器支持现代浏览器支持良好，IE11支持有限支持更广泛，包括旧版浏览器
学习曲线相对较陡，概念和属性较多相对平缓，容易上手
最佳搭配与Flex布局结合使用，Grid控制整体结构，Flex控制局部排列与Grid布局结合使用，Flex控制局部排列

7. 常用单位和函数 ​

7.1 常用单位 ​

单位描述适用场景
px像素单位，固定尺寸固定宽度/高度的布局
%百分比单位，相对于父元素响应式布局，相对于容器尺寸
fr弹性单位，分配剩余空间弹性布局，按比例分配空间
auto自动适应内容或容器自适应内容的布局
em相对于父元素字体大小相对字体大小的布局
rem相对于根元素字体大小全局一致的相对单位

7.2 常用函数 ​

函数描述示例
repeat()重复指定的轨道定义repeat(3, 1fr)
minmax()设置轨道的最小和最大尺寸minmax(100px, 1fr)
auto-fill自动填充尽可能多的轨道repeat(auto-fill, minmax(200px, 1fr))
auto-fit自适应填充轨道，合并空轨道repeat(auto-fit, minmax(200px, 1fr))
clamp()限制值在最小和最大值之间clamp(100px, 50%, 500px)

8. 浏览器兼容性 ​

浏览器支持版本注意事项
Chrome57+完全支持
Firefox52+完全支持
Safari10.1+完全支持
Edge16+完全支持
IE11部分支持需要使用厂商前缀，部分属性支持有限

9. 性能优化建议 ​

  1. 避免过度嵌套：减少Grid容器的嵌套层级，避免复杂的网格结构
  2. 合理使用fr单位：不要在大量轨道上使用fr单位，可能影响性能
  3. 使用适当的网格轨道数量：过多的轨道可能导致浏览器渲染性能下降
  4. 避免频繁重排：减少对Grid布局相关属性的动态修改
  5. 使用CSS变量：使用CSS变量管理Grid布局的尺寸和间距，提高可维护性
  6. 测试不同浏览器：确保Grid布局在目标浏览器中正常工作

10. 调试技巧 ​

  1. 使用浏览器开发者工具：利用Chrome和Firefox的Grid布局调试工具
  2. 添加网格线可视化：在浏览器开发者工具中开启网格线显示
  3. 使用临时边框：为网格项目添加临时边框，帮助可视化布局结构
  4. 简化布局：逐步构建布局，先实现基本结构，再添加细节
  5. 使用在线工具：利用Grid布局在线生成器和调试工具
  6. 参考示例代码：学习优秀的Grid布局实现，参考其代码结构

小结 ​

本附录汇总了Grid布局的核心知识点，包括核心术语、属性汇总、常用布局模板、易错点对照表、与Flex布局的区别、常用单位和函数、浏览器兼容性、性能优化建议以及调试技巧。

通过参考本附录，你可以快速查阅Grid布局的相关知识，解决布局过程中遇到的问题，提高Grid布局的使用效率。

记住，Grid布局是一种强大的布局技术，掌握它需要不断地实践和探索。结合本教程的内容和本附录的参考资料，你将能够灵活运用Grid布局，创建出美观、响应式的网页布局。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建