C51. Grid 网格布局

1.1. 网格布局简化特定情境的开发

网格布局（Grid Layout）是 CSS 提供的二维布局方案，专为复杂多列、多行的布局设计而生。它解决了传统布局（如 float、position）在响应式设计中的局限性，尤其适合以下场景：

• 多列布局（如博客文章列表、电商商品展示）
• 响应式自适应（通过 fr 单位和 auto-fill 实现弹性调整）
• 复杂界面（如仪表盘、多媒体画廊）

🌟 为什么选择 Grid？

1. 二维控制：同时定义行与列，精确控制元素位置。
2. 自动布局：浏览器自动分配网格项，减少手动计算。
3. 响应式友好：配合 repeat()、minmax() 等函数实现自适应。
4. 替代复杂框架：无需依赖 Bootstrap 等第三方库即可实现高级布局。

1.2. 网格布局相关的 CSS 属性

1.2.1. 容器属性（定义网格结构）

⭐ display: grid

将元素设为网格容器，子元素成为网格项。

.container {
  display: grid; /* 块级网格容器 */
  display: inline-grid; /* 行内块级网格容器 */
}

⭐ grid-template-columns 和 grid-template-rows

定义列宽和行高。支持以下单位：

• 绝对单位（px、%）
• 弹性单位（1fr = 1 fraction，剩余空间分配）
• 函数：repeat()、minmax() 等。

示例：

.container {
  /* 3列等宽，每列占1份剩余空间 */
  grid-template-columns: 1fr 1fr 1fr; 
  /* 行高固定，2行各100px */
  grid-template-rows: 100px 100px;
}

📌 grid-template（简写属性）

同时定义列和行，语法： grid-template: <行轨道> / <列轨道>。

.container {
  grid-template: repeat(2, 100px) / repeat(3, 1fr);
}

📍 gap（替代 grid-gap）

设置网格项之间的间距（水平+垂直），支持简写：

.container {
  gap: 10px 20px; /* 行间距10px，列间距20px */
}

🔄 grid-auto-flow

控制自动放置网格项的规则：

• row（默认）：按行填满后换行。
• column：按列填满后换列。
• dense：允许浏览器重新排列项以填充空隙。

.container {
  grid-auto-flow: column; /* 按列优先排列 */
}

1.2.2. 项目属性（控制单个网格项）

🔗 grid-column 和 grid-row

通过网格线编号定义项的起始与结束位置。 语法：grid-column: <起始线> / <结束线>。

.item1 {
  grid-column: 1 / 3; /* 从第1列线到第3列线（占据2列） */
  grid-row: 1 / 2;    /* 从第1行线到第2行线（占据1行） */
}

🏷️ grid-area

通过名称或坐标定义区域：

.item2 {
  grid-area: 2 / 3 / 4 / 5; /* 行1-3，列3-5 */
}

📏 自动尺寸与弹性

• minmax(min, max)：定义轨道的最小与最大尺寸。 grid-template-columns: minmax(200px, 1fr);
• auto-fill：自动填充尽可能多的网格项。 grid-template-columns: repeat(auto-fill, 200px);

1.2.3. 注意事项

WARNING

• grid-gap 已废弃，改用 gap。
• 网格线编号从 1 开始，或用 auto、span 等关键字。
• 网格项超出容器时，需通过 grid-auto-rows/grid-auto-columns 定义额外轨道。

1.3. 网格布局实现示例

🛠️ 示例1：三列响应式布局

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等分 */
  gap: 20px;
  padding: 20px;
}

.item1 { background: #ffcccc; }
.item2 { background: #ccffcc; }
.item3 { background: #ccccff; }

TIP

效果：三列等宽布局，间距20px，响应式调整。

🛠️ 示例2：自适应网格（商品展示）

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

/* 媒体查询适配小屏幕 */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr; /* 单列 */
  }
}

INFO

minmax(200px, 1fr)：最小200px，剩余空间均分。

🛠️ 示例3：网格线定位

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.item-a { grid-row: 1 / 3; grid-column: 2 / 4; } /* 跨行跨列 */
.item-b { grid-row: 3; grid-column: 1 / -1; }    /* 跨所有列 */

知识回顾

1. 核心属性：
   • 容器：display: grid、grid-template-columns/rows、gap、grid-auto-flow。
   • 项目：grid-row/grid-column、grid-area。
2. 关键概念：
   • 网格线编号从 1 开始，支持 auto、span。
   • fr 单位分配剩余空间，repeat() 简化重复轨道定义。
3. 响应式技巧：
   • auto-fill + minmax() 实现自适应列数。

课后练习

1. （单选）以下哪个属性用于设置网格项之间的间距？ A. grid-gap B. gap C. grid-space D. margin

2. （填空）使用 grid-template-columns: repeat(4, 1fr); 定义了___列，每列宽度为容器剩余空间的___。

3. （代码题）修复以下代码，使网格项 item3 跨越两列：

   .grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
   }
   .item3 { grid-column: 2; } /* 不足 */