CSS Grid 通过 grid-template-columns 和 grid-template-rows 定义行列结构，结合 fr 单位、repeat() 函数与 minmax() 实现灵活布局；使用 gap 设置间距，grid-area 配合 grid-template-areas 可视化划分区域；配合媒体查询与 repeat(auto-fit, minmax()) 实现响应式，适用于复杂页面的高效构建。
实现复杂的网页网格布局，CSS Grid 是目前最强大且高效的方式。通过简单的几行代码定义行、列和间距，就能快速搭建出响应式、结构清晰的页面布局。
使用 grid-template-columns 和 grid-template-rows 定义行列
Grid 布局的核心是通过 grid-template-columns 和 grid-template-rows 明确指定网格的结构。
你可以使用像素（px）、百分比（%）或更灵活的 fr 单位来分配空间。-
fr 单位：表示“分数”，即剩余可用空间的份数。例如
1fr 2fr表示两列，第二列是第一列宽度的两倍。 -
repeat() 函数：简化重复定义。比如
repeat(3, 1fr)创建三等分列。 - 结合 minmax() 可设置最小最大尺寸，如
minmax(100px, 1fr)。
示例：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px auto 50px;
}
这将创建两列（比例1:2）和三行（固定、自适应、固定）的布局。
使用 gap 属性设置网格间距
gap 是设置行与行、列与列之间间距的简洁方式，替代了旧的 grid-gap。
- 可单独设置
row-gap和column-gap，也可用gap一次性定义。 - 推荐使用
rem或px单位，保持视觉一致性。
示例：
.container {
gap: 1rem;
}
所有网格项之间都会保持 1rem 的间距，无需额外 margin 控制。
通过 grid-area 快速划分区域
对于复杂布局，如仪表盘或后台界面，使用 grid-template-areas 能直观地规划结构。
- 为每个区域命名，并在容器中用字符串布局描述。
- 子元素通过
grid-area: 名称归属对应区域。
示例：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 60px auto 40px;
grid-template-columns: 200px 1fr;
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这种方式让布局结构一目了然，维护和修改更轻松。
响应式网格的简单处理
配合媒体查询和 minmax() + auto-fit，可快速实现自适应网格。
- 使用
repeat(auto-fit, minmax(250px, 1fr))让项目在容器内自动换行并均分空间。 - 当容器变窄时，列会自动减少，无需写多个断点。
示例：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
适用于卡片列表、图库等场景，适配手机到桌面端。
基本上就这些。掌握 grid-template-columns、grid-template-rows、gap 和 grid-area，再结合响应式技巧，复杂布局也能快速实现。不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
