HTML5怎么使用Grid布局_HTML5 Grid布局系统教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML5怎么使用Grid布局_HTML5 Grid布局系统教程

2025-10-21

浏览次数：次

返回列表

Grid布局通过CSS的display: grid实现，需定义容器和项目；使用grid-template-columns/rows设置行列，fr单位与repeat()函数可简化布局；支持网格线编号或命名区域定位项目；结合justify-items、align-items等控制对齐，并通过媒体查询实现响应式设计。

html5怎么使用grid布局_html5 grid布局系统教程

Grid布局是CSS3引入的一种二维布局系统，能够同时处理行和列，非常适合构建复杂的网页结构。HTML5本身并不直接提供Grid布局功能，而是通过CSS中的display: grid来实现。下面详细介绍如何在HTML5中使用Grid布局。

1. 基本概念：容器与项目

使用Grid布局时，首先要定义一个网格容器，然后其直接子元素会自动成为网格项目。

设置容器：

给父元素（容器）添加display: grid或display: inline-grid。
容器内的每个子元素就是网格中的一个单元格（项目）。

示例HTML：

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

CSS设置为网格容器：

.grid-container {
  display: grid;
}

2. 定义行和列

使用grid-template-columns和grid-template-rows来定义列宽和行高。

grid-template-columns: 100px 200px 100px; —— 创建三列，宽度分别为100px、200px、100px。
grid-template-rows: 50px 100px; —— 创建两行，高度分别为50px和100px。
可以使用fr单位分配剩余空间，如1fr 2fr表示比例为1:2。
使用repeat()函数简化重复定义，例如：repeat(3, 1fr) 等价于 1fr 1fr 1fr。

示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
  gap: 10px; /* 设置项目之间的间距 */
}

3. 网格线与区域命名

Grid支持通过网格线编号或自定义名称来定位项目。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

每个网格线从左到右、从上到下编号，项目可通过grid-column和grid-row指定起止线。
也可以使用grid-area一次性设置四个边的位置。

示例：让第一个项目占据第1到第3列

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

使用命名区域更直观：

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
<p>.item1 { grid-area: header; }
.item2 { grid-area: sidebar; }
.item3 { grid-area: main; }
.item4 { grid-area: footer; }

4. 对齐方式与响应式设计

Grid提供了强大的对齐控制能力。

justify-items：控制项目在行轴上的对齐（如left、center、right）。
align-items：控制项目在列轴上的对齐（如start、center、end）。
justify-content：当网格总大小小于容器时，控制整体内容的水平分布。
结合@media查询可实现响应式布局，比如在小屏幕上改为单列排列。

响应式示例：

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}