1. 什么是CSS网格布局？

网格是一组相交的水平线和垂直线，它定义了网格的列和行。CSS 提供了一个基于网格的布局系统，带有行和列，

与 flexbox 的一维布局不同 网格布局允许我们员创建复杂的网页布局，更轻松地设计网页，而无需使用浮动和定位，且代码更简洁直观。

核心概念：

• 网格容器 (Grid Container)
• 网格项 (Grid Items)
• 轨道 (Tracks)
• 单元格 (Cell)
• 区域 (Area)

2. 创建基础网格

2.1. 定义网格容器

.container {
  display: grid; /* 或 inline-grid */
}

2.2. 设置轨道尺寸

.container {
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: 100px auto;
}

2.3. 间距控制

.container {
  gap: 10px; /* 行列统一间距 */
  row-gap: 15px;
  column-gap: 20px;
}

3. 高级定位技巧

3.1. 线编号定位

.item {
  grid-column: 2 / 4; /* 从第2列线到第4列线 */
  grid-row: 1 / span 2; /* 跨2行 */
}

3.2. 命名区域布局

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

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

4. 响应式布局策略

4.1. 自适应轨道

.container {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

4.2. 媒体查询适配

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

5. 完整属性速查表

容器属性

属性	描述	可选值	默认值
display	定义网格容器	grid / inline-grid	-
grid-template-columns	定义列轨道	track-list	none
grid-template-rows	定义行轨道	track-list	none
grid-template-areas	定义命名区域	string-list	none
grid-template	复合属性	合并以上属性	-
gap	网格间距	length	0
grid-auto-columns	隐式列尺寸	track-size	auto
grid-auto-rows	隐式行尺寸	track-size	auto
grid-auto-flow	自动布局算法	row / column / dense	row
align-items	垂直对齐方式	start / end / center / stretch	stretch
justify-items	水平对齐方式	start / end / center / stretch	stretch
place-items	复合对齐属性	[align-items] [justify-items]	-
align-content	垂直内容分布	start / end / center / stretch / space-around / space-between / space-evenly	start
justify-content	水平内容分布	同上	start
place-content	复合内容分布属性	[align-content] [justify-content]	-

项目属性

属性	描述	可选值	默认值
grid-column-start	列起始位置	line-number / span n	auto
grid-column-end	列结束位置	同上	auto
grid-row-start	行起始位置	同上	auto
grid-row-end	行结束位置	同上	auto
grid-column	列简写属性	start-line / end-line	auto
grid-row	行简写属性	同上	auto
grid-area	区域定位属性	name / row-start / column-start / row-end / column-end	auto
align-self	单个项目垂直对齐	start / end / center / stretch	container默认
justify-self	单个项目水平对齐	同上	container默认
place-self	复合对齐属性	[align-self] [justify-self]	-
order	显示顺序	integer	0