CSS Grid布局详解

描述
CSS Grid布局是一个二维布局系统，专门用于处理行和列方向的页面布局。与Flexbox（一维布局）不同，Grid可以同时控制两个方向的排列，非常适合构建复杂的网页整体结构。

核心概念

1. Grid容器：设置了display: grid的元素
2. Grid项目：Grid容器的直接子元素
3. 网格线：划分网格的线条，有水平线和垂直线
4. 网格轨道：两条相邻网格线之间的空间（行或列）
5. 网格单元格：四条网格线包围的最小单位
6. 网格区域：任意矩形区域，由多个单元格组成

基本用法步骤

步骤1：创建Grid容器

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

步骤2：定义网格结构

• 使用grid-template-columns定义列宽
• 使用grid-template-rows定义行高

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 三列，宽度分别为100px,200px,100px */
  grid-template-rows: 50px 100px; /* 两行，高度分别为50px,100px */
}

步骤3：使用单位

• fr单位：按比例分配剩余空间

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */
}

• repeat()函数：简化重复定义

.container {
  grid-template-columns: repeat(3, 1fr); /* 等同于1fr 1fr 1fr */
}

步骤4：网格间距

.container {
  gap: 10px; /* 行列间距都为10px */
  /* 或分别设置 */
  row-gap: 10px;
  column-gap: 20px;
}

步骤5：项目定位

• 按网格线定位：

.item {
  grid-column-start: 1; /* 从第1条垂直线开始 */
  grid-column-end: 3;   /* 到第3条垂直线结束 */
  grid-row-start: 1;    /* 从第1条水平线开始 */
  grid-row-end: 2;      /* 到第2条水平线结束 */
  
  /* 简写方式 */
  grid-column: 1 / 3;   /* 开始线 / 结束线 */
  grid-row: 1 / 2;
}

• 按网格区域定位：

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

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

步骤6：对齐方式

• 容器内对齐（justify-items, align-items）
• 项目自对齐（justify-self, align-self）
• 整体内容对齐（justify-content, align-content）

实际应用示例

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh;
}

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

Grid布局提供了强大的二维布局能力，通过合理组合这些属性，可以轻松实现各种复杂的页面布局结构。