01. Grid——二维布局之王
Flexbox 适合一维（要么横要么竖），Grid 是真正的二维布局——同时管行和列。像棋盘一样，把容器分几行几列，把元素放指定格子里。
Grid 最适合：页面整体布局、仪表盘、图片墙、需要同时控制行列的场景。
02. 基础网格——分行分列
Grid 核心是定义行列「轨道」：
grid-template-columns——几列、每列多宽
grid-template-rows——几行、每行多高
gap——格子之间的间距
css
/* Grid 基础 */
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; }
/* fr 是 Grid 里最实用的单位：剩余空间的份数 */
.equal-cols { display: grid; grid-template-columns: repeat(3, 1fr); /* 三等分 */ }
/* 响应式自动列数，每列最少 250px */
.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }fr（fraction）是 Grid 最实用的单位，1fr 2fr 表示第二列是第一列两倍宽，不用算百分比。
03. 区域命名法——最优雅的布局方式
grid-template-areas 给每个格子取名字，放元素时直接用名字指定位子，布局结构一目了然。改布局只需改 areas 里的名字排列就行。
css
/* Grid 区域命名——最直观的布局 */
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 12px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }grid-template-areas 是 Grid 最优雅的用法，布局结构一眼就看明白了。
04. Flexbox 还是 Grid？
Flexbox——一维布局，一排或一列里排列元素。适合导航栏、按钮组、卡片列表。
Grid——二维布局，同时控制行和列。适合整体页面布局、仪表盘、图库。
它们不冲突，经常混着用——外层大结构用 Grid，里面小组件用 Flexbox。
知识测验
第 1/5 题正确 0
Grid 的 fr 单位表示什么？
下一节
下一节 响应式设计