CSS 学习手册

CSS Grid（网格布局）是一种二维布局系统，可以同时控制行和列，比 Flexbox 更强大，适合构建复杂的页面结构。 **核心概念：** - **网格容器（grid container）**：设置 `display: grid` 的元素 - **网格项（grid items）**：容器的直接子元素 - **网格线（grid lines）**：划分网格的线条，有编号 - **网格轨道（grid tracks）**：行和列之间的空间 - **网格单元（grid cell）**：行和列交叉形成的最小单位 - **网格区域（grid area）**：由四条网格线包围的区域 **基本使用：** ```css .container { display: grid; grid-template-columns: 100px 1fr 2fr; /* 三列：固定、比例、比例 */ grid-template-rows: auto 200px; /* 两行 */ gap: 20px; /* 行列间距 */ } ``` **单位：** - `px`：固定像素 - `fr`：剩余空间的分数（如 1fr, 2fr） - `%`：百分比 - `auto`：内容自适应 - `minmax(min, max)`：最小最大范围