第二十二天：网格布局

一、分类

1. 容器（Grid Container）：设置 display: grid 的父元素，所有直接子元素自动成为网格项。
2. 网格项（Grid Item）：容器的直接子元素（只影响第一层子元素）。
3. 网格线（Grid Line）：划分网格的分界线（水平 / 垂直）。
4. 网格轨道（Grid Track）：两条相邻网格线之间的空间（行 / 列）。
5. 网格单元格（Grid Cell）：网格的最小单位（类似表格单元格）。

这里我们使用：/* 块级网格容器 */ .container { display: grid; } /* 行内网格容器 */ .container { display: inline-grid; }来定义网格容器

grid-template-columns定义列宽固定值 / 百分比 /fr/autogrid-template-rows定义行高同上

这里我们常用的取值：

• fr：剩余空间分配比例（Grid 专用单位，推荐）
• auto：自动填充剩余空间
• repeat(次数, 尺寸)：快速生成重复轨道
• minmax(最小尺寸, 最大尺寸)：设置尺寸范围

网格间距我们可以这样：.container { /* 行间距 + 列间距（简写，推荐） */ gap: 20px 10px; /* 单独设置行间距 */ row-gap: 20px; /* 单独设置列间距 */ column-gap: 10px; }

当然我们网格布局的时候难免会因为小细节而烦恼，我们可以使用这串代码，也就是自适应：.container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }（自动填充）

整体代码就是：.page { display: grid; /* 3行：头部80px、主体自适应、底部60px */ grid-template-rows: 80px auto 60px; /* 2列：侧边200px、主体剩余空间 */ grid-template-columns: 200px 1fr; /* 划分区域（语义化，超好用） */ grid-template-areas: "header header" "sidebar main" "footer footer"; gap: 10px; min-height: 100vh; } /* 给元素分配区域 */ .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }