HTML5 中 CSS Grid 布局下面是一个围绕 HTML5 中 CSS Grid 布局的基础示例，帮助你快速掌握

下面是一个围绕 HTML5 中 CSS Grid 布局 的基础示例，帮助你快速掌握 Grid 的基本使用方式。

🧩 Grid 布局基础 Demo

💡 场景说明：

我们创建一个简单的 3 行 3 列的九宫格布局，每个格子中显示不同的内容。

✅ HTML 部分：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid 基础 Demo</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 创建三列 */
      grid-template-rows: repeat(3, 100px);   /* 创建三行，每行高100px */
      gap: 10px;                             /* 单元格间距 */
      padding: 20px;
      background-color: #f0f0f0;
    }

    .grid-item {
      background-color: #4CAF50;
      color: white;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
  </style>
</head>
<body>

  <h2>九宫格 Grid 布局示例</h2>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

</body>
</html>

🔍 关键知识点解释：

属性	说明
`display: grid`	将容器设为 Grid 布局
`grid-template-columns: repeat(3, 1fr)`	定义 3 列，每列平均分配宽度
`grid-template-rows: repeat(3, 100px)`	定义 3 行，每行高度为 100px
`gap: 10px`	设置单元格之间的间距（横向和纵向）
`align-items / justify-content`	控制单元格内元素的对齐方式

📌 扩展练习建议：

修改列宽：
```
grid-template-columns: 100px 200px 1fr;
```
观察不同列的宽度变化。
合并单元格： 给某个 .grid-item 添加：
```
grid-column: span 2;
grid-row: span 2;
```
实现跨列/跨行展示。

响应式布局： 使用媒体查询实现不同屏幕尺寸下自动调整列数：

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

✅ 总结：

CSS Grid 是一种非常强大的二维布局系统，非常适合用于构建复杂的网页结构。通过这个基础 Demo，你可以理解 Grid 的核心概念，并在此基础上继续深入学习，比如区域命名、响应式设计、嵌套网格等高级用法。

如果你正在学习 HTML5 和 CSS 布局，Grid 是必须掌握的核心技能之一！