微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > Web 前端 - CSS - Grid 网格布局及通用PC端布局实战
博主信息
博文 33
粉丝 0
评论 0
访问量 35143
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Web 前端 - CSS - Grid 网格布局及通用PC端布局实战
郴
原创
1530人浏览过

Web 前端 - CSS - Grid 网格布局及通用PC端布局实战

[toc]

一、概述

序号 属性 描述
1 解释 网格布局是一个二维的基于网格的布局系统
2 特点 由水平（行）和垂直（列）线集合创建的一个模式，我们可以根据这个模式排列我们的设计元素
3 场景 和flex配合能够快速布局复杂的页面，使用媒体查询重新排列网格变得非常容易，同时gird布局比其他布局方式所需的代码量少很多

二、网格容器

  • 网格容器：应用 display: grid 的元素。这是所有网格项的直接父级元素
  • 网格项：网格容器的直接子元素，也叫项目
  • 网格线：构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧
  • 网格轨道：两条相邻网格线之间的空间。你可以把它们想象成网格的列或行

1. 属性

序号 属性 描述 格式
1 grid-template-columns 显式定义列及单元格的宽度 grid-template-columns: [line_name] cell_width_1 [line_name] cell_width_2 [line_name] cell_width_3;
2 grid-template-rows 显式定义行及单元格的高度 grid-template-rows: [line_name] cell_height_1 [line_name] cell_height_2 [line_name] cell_height_3;
3 grid-auto-columns 隐式定义列及单元格的宽度，当项目多于单元格时就会创建隐式单元格 grid-auto-columns: cell_height_1 cell_height_2 cell_height_3;
4 grid-auto-rows 隐式定义行及单元格的高度，当项目多于单元格时就会创建隐式单元格 grid-auto-rows: cell_height_1 cell_height_2 cell_height_3;
5 grid-auto-flow 设置项目在单元格中的排列方式
6 justify-content 设置单元格在容器横轴（行）上的对齐方式
7 align-content 设置单元格在容器纵轴（列）上的对齐方式
8 place-content justify-content和align-content属性的简写
9 justify-items 设置项目在单元格横轴（行）上的对齐方式
10 align-items 设置项目在单元格纵轴（列）上的对齐方式
11 place-items justify-items和align-items属性的简写
12 column-gap 设置列间距
13 row-gap 设置行间距
14 gap column-gap和row-gap属性的简写

2. 值

序号 值/单位 描述 适用属性 备注
1 auto 浏览器自动计算 grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
2 px 固定值，像素计 grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
3 % 百分比，按百分比分配 grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
4 fr 比例，按比例分配 grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
5 repeat 重复、分组、弹性、自动填充设置 grid-template-columns、grid-template-rows 重复：grid-template-columns: repeat (n, cell_height_1 cell_height_2 cell_height_3)，n代表重复的次数，cell_height代表单元格的宽度
6 row 默认值。水平（行）方向，顺序为从左往右 grid-auto-flow
7 column 垂直（列）方向，顺序为从上往下 grid-auto-flow
8 start 默认值。左侧起始线对齐 justify-content
9 end 右侧终止线对齐 justify-content
10 center 居中对齐 justify-content
11 stretch 填充满整个网格容器的宽度 justify-content
12 space-evenly 平均对齐。剩余空间在每个单元格之间平均分配 justify-content
13 space-around 分散对齐。剩余空间在每个单元格两侧平均分配 justify-content
14 space-between 两端对齐。剩余空间在头尾单元格之外的子元素之间平均分配 justify-content
15 start 默认值。顶部起始线对齐 align-content
16 end 底部终止线对齐 align-content
17 center 居中对齐 align-content
18 stretch 填充满整个网格容器的高度 align-content
19 space-evenly 平均对齐。剩余空间在每个单元格之间平均分配 align-content
20 space-around 分散对齐。剩余空间在每个单元格两侧平均分配 align-content
21 space-between 两端对齐。剩余空间在头尾单元格之外的子元素之间平均分配 align-content
22 start 默认值。单元格左侧起始线对齐 justify-items
23 end 单元格右侧终止线对齐 justify-items
24 center 居中对齐 justify-items
25 stretch 填满单元格的宽度 justify-items
26 start 默认值。单元格顶部起始线对齐 align-items
27 end 单元格底部终止线对齐 align-items
28 center 居中对齐 align-items
29 stretch 填满单元格的高度 align-items

三、网格单元格

  • 网格单元格：两个相邻的行和两个相邻的列网格线之间的空间，这是构成网格系统的一个基本单元

1. 属性

序号 属性 描述 格式
1 grid-column-start 引用列网格线划分单元格跨度，单元格开始的列网格线 `grid-column-start: n span n line_name auto`
2 grid-column-end 引用列网格线划分单元格跨度，单元格结束的列网格线 `grid-column-end: n span n line_name auto`
3 grid-row-start 引用行网格线划分单元格跨度，单元格开始的行网格线 `grid-row-start: n span n line_name auto`
4 grid-row-end 引用行网格线划分单元格跨度，单元格结束的行网格线 `grid-row-end: n span n line_name auto`
5 grid-column grid-column-start和grid-column-end属性的简写 `grid-column: satrt-line / end-line satrt-line / span n`
6 grid-row grid-row-start和grid-row-end属性的简写 `grid-row: satrt-line / end-line satrt-line / span n`
7 justify-self 设置某项目在单元格横轴（行）上的对齐方式
8 align-self 设置某项目在单元格纵轴（列）上的对齐方式
9 place-self justify-items和align-items属性的简写

2. 值

序号 值 描述 适用属性
1 start 默认值。单元格左侧起始线对齐 justify-self
2 end 单元格右侧终止线对齐 justify-self
3 center 居中对齐 justify-self
4 stretch 填满单元格的宽度 justify-self
5 start 默认值。单元格顶部起始线对齐 align-self
6 end 单元格底部终止线对齐 align-self
7 center 居中对齐 align-self
8 stretch 填满单元格的高度 align-self

四、网格区域

  • 网格区域：由网格单元格组成的矩形块，一个网格区域可以由任意数量的网格单元格组成

属性

序号 属性 描述 格式 适用
1 grid-template-areas 通过引用grid-area属性指定的网格区域名称来定义网格模板 `grid-template-areas: grid-area_name . none` 容器
2 grid-area 为项目提供一个名称，以便可以被使用网格容器 grid-template-areas 属性创建的模板进行引用，或者直接划分单元格跨度 `grid-area: item_name grid-row-start / grid-column-start / grid-row-end / grid-column-end` 项目

五、代码实例

1. 使用固定值、百分比、比例、auto、repeat重复、分组、弹性和自动填充设置显式地划分行和列

1.1 使用固定值显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: 100px 100px 100px;
  15.             grid-template-rows: 100px 100px 100px;
  16.         }
  17.         span {
  18.             background-color: lightcoral;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <span>1</span>
  25.         <span>2</span>
  26.         <span>3</span>
  27.         <span>4</span>
  28.         <span>5</span>
  29.         <span>6</span>
  30.         <span>7</span>
  31.         <span>8</span>
  32.         <span>9</span>
  33.     </div>
  34. </body>
  35. </html>

1.2 使用百分比显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: 25% 25% 25%;
  15.             grid-template-rows: 25% 25% 25%;
  16.         }
  17.         span {
  18.             background-color: lightcoral;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <span>1</span>
  25.         <span>2</span>
  26.         <span>3</span>
  27.         <span>4</span>
  28.         <span>5</span>
  29.         <span>6</span>
  30.         <span>7</span>
  31.         <span>8</span>
  32.         <span>9</span>
  33.     </div>
  34. </body>
  35. </html>

1.3 使用比例显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: 0.25fr 0.25fr 0.25fr;
  15.             grid-template-rows: 0.25fr 0.25fr 0.25fr;
  16.         }
  17.         span {
  18.             background-color: lightcoral;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <span>1</span>
  25.         <span>2</span>
  26.         <span>3</span>
  27.         <span>4</span>
  28.         <span>5</span>
  29.         <span>6</span>
  30.         <span>7</span>
  31.         <span>8</span>
  32.         <span>9</span>
  33.     </div>
  34. </body>
  35. </html>

1.4 使用auto显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: 0.25fr auto 0.25fr;
  15.             grid-template-rows: 0.25fr auto 0.25fr;
  16.         }
  17.         span {
  18.             background-color: lightcoral;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <span>1</span>
  25.         <span>2</span>
  26.         <span>3</span>
  27.         <span>4</span>
  28.         <span>5</span>
  29.         <span>6</span>
  30.         <span>7</span>
  31.         <span>8</span>
  32.         <span>9</span>
  33.     </div>
  34. </body>
  35. </html>

1.5 使用repeat重复显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: repeat(3, 0.25fr);
  15.             grid-template-rows: repeat(3, 0.25fr);
  16.         }
  17.         span {
  18.             background-color: lightcoral;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <span>1</span>
  25.         <span>2</span>
  26.         <span>3</span>
  27.         <span>4</span>
  28.         <span>5</span>
  29.         <span>6</span>
  30.         <span>7</span>
  31.         <span>8</span>
  32.         <span>9</span>
  33.     </div>
  34. </body>
  35. </html>

1.6 使用repeat分组显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-columns: repeat(3, 0.5fr 0.3fr);
  15.         grid-template-rows: repeat(3, 0.5fr 0.3fr);
  16.       }
  17.       span {
  18.         background-color: lightcoral;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="box">
  24.       <span>1</span>
  25.       <span>2</span>
  26.       <span>3</span>
  27.       <span>4</span>
  28.       <span>5</span>
  29.       <span>6</span>
  30.       <span>7</span>
  31.       <span>8</span>
  32.       <span>9</span>
  33.     </div>
  34.   </body>
  35. </html>

1.7 使用repeat弹性显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-columns: repeat(3, minmax(100px, 200px));
  15.         grid-template-rows: repeat(3, minmax(100px, 200px));
  16.       }
  17.       span {
  18.         background-color: lightcoral;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="box">
  24.       <span>1</span>
  25.       <span>2</span>
  26.       <span>3</span>
  27.       <span>4</span>
  28.       <span>5</span>
  29.       <span>6</span>
  30.       <span>7</span>
  31.       <span>8</span>
  32.       <span>9</span>
  33.     </div>
  34.   </body>
  35. </html>

1.8 使用repeat自动填充显式地划分行和列

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-columns: repeat(auto-fill, 100px);
  15.         grid-template-rows: repeat(auto-fill, 100px);
  16.       }
  17.       span {
  18.         background-color: lightcoral;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="box">
  24.       <span>1</span>
  25.       <span>2</span>
  26.       <span>3</span>
  27.       <span>4</span>
  28.       <span>5</span>
  29.       <span>6</span>
  30.       <span>7</span>
  31.       <span>8</span>
  32.       <span>9</span>
  33.     </div>
  34.   </body>
  35. </html>

2. 设置单元格在容器上的对齐方式、项目在单元格上的对齐方式、某项目在单元格中的对齐方式、项目在单元格中的排列方式及行和列间距

2.1 设置单元格在容器上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: repeat(3, 0.25fr);
  15.             grid-template-rows: repeat(3, 0.25fr);
  16.             place-content: center center;
  17.         }
  18.         span {
  19.             background-color: lightcoral;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <span>1</span>
  26.         <span>2</span>
  27.         <span>3</span>
  28.         <span>4</span>
  29.         <span>5</span>
  30.         <span>6</span>
  31.         <span>7</span>
  32.         <span>8</span>
  33.         <span>9</span>
  34.     </div>
  35. </body>
  36. </html>

2.2 设置项目在单元格上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: repeat(3, 0.25fr);
  15.             grid-template-rows: repeat(3, 0.25fr);
  16.             place-items: center center;
  17.         }
  18.         span {
  19.             background-color: lightcoral;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <span>1</span>
  26.         <span>2</span>
  27.         <span>3</span>
  28.         <span>4</span>
  29.         <span>5</span>
  30.         <span>6</span>
  31.         <span>7</span>
  32.         <span>8</span>
  33.         <span>9</span>
  34.     </div>
  35. </body>
  36. </html>

2.3 设置某项目在单元格中的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: repeat(3, 0.25fr);
  15.             grid-template-rows: repeat(3, 0.25fr);
  16.         }
  17.         span {
  18.             background-color: lightcoral;
  19.         }
  20.         span:nth-of-type(5) {
  21.             place-self: center center;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="box">
  27.         <span>1</span>
  28.         <span>2</span>
  29.         <span>3</span>
  30.         <span>4</span>
  31.         <span>5</span>
  32.         <span>6</span>
  33.         <span>7</span>
  34.         <span>8</span>
  35.         <span>9</span>
  36.     </div>
  37. </body>
  38. </html>

2.4 设置项目在单元格中的排列方式

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: repeat(3, 0.25fr);
  15.             grid-template-rows: repeat(3, 0.25fr);
  16.             grid-auto-flow: column;
  17.         }
  18.         span {
  19.             background-color: lightcoral;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <span>1</span>
  26.         <span>2</span>
  27.         <span>3</span>
  28.         <span>4</span>
  29.         <span>5</span>
  30.         <span>6</span>
  31.         <span>7</span>
  32.         <span>8</span>
  33.         <span>9</span>
  34.     </div>
  35. </body>
  36. </html>

2.5 设置行和列间距

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: lightblue;
  13.             display: grid;
  14.             grid-template-columns: repeat(3, 0.25fr);
  15.             grid-template-rows: repeat(3, 0.25fr);
  16.             gap: 10px 5px;
  17.         }
  18.         span {
  19.             background-color: lightcoral;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <span>1</span>
  26.         <span>2</span>
  27.         <span>3</span>
  28.         <span>4</span>
  29.         <span>5</span>
  30.         <span>6</span>
  31.         <span>7</span>
  32.         <span>8</span>
  33.         <span>9</span>
  34.     </div>
  35. </body>
  36. </html>

3. 使用网格线、使用偏移量和使用命名网格线划分单元格跨度

3.1 使用网格线划分单元格跨度

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-columns: repeat(3, 100px);
  15.         grid-template-rows: repeat(3, 100px);
  16.       }
  17.       span {
  18.         background-color: lightcoral;
  19.       }
  20.       span:nth-of-type(1) {
  21.         background-color: lavender;
  22.         grid-column-start: 2;
  23.         grid-column-end: 3;
  24.         grid-row-start: 1;
  25.         grid-row-end: 3;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="box">
  31.       <span>1</span>
  32.       <span>2</span>
  33.       <span>3</span>
  34.       <span>4</span>
  35.       <span>5</span>
  36.       <span>6</span>
  37.       <span>7</span>
  38.       <span>8</span>
  39.       <span>9</span>
  40.     </div>
  41.   </body>
  42. </html>

3.2 使用偏移量划分单元格跨度

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-columns: repeat(3, 100px);
  15.         grid-template-rows: repeat(3, 100px);
  16.       }
  17.       span {
  18.         background-color: lightcoral;
  19.       }
  20.       span:nth-of-type(1) {
  21.         background-color: lavender;
  22.         grid-column: 2 / span 1;
  23.         grid-row: 1 / span 2;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="box">
  29.       <span>1</span>
  30.       <span>2</span>
  31.       <span>3</span>
  32.       <span>4</span>
  33.       <span>5</span>
  34.       <span>6</span>
  35.       <span>7</span>
  36.       <span>8</span>
  37.       <span>9</span>
  38.     </div>
  39.   </body>
  40. </html>

3.3 使用命名网格线划分单元格跨度

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-columns:
  15.           [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px
  16.           [c3-end];
  17.         grid-template-rows:
  18.           [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px
  19.           [r3-end];
  20.       }
  21.       span {
  22.         background-color: lightcoral;
  23.       }
  24.       span:nth-of-type(1) {
  25.         background-color: lavender;
  26.         grid-column: c2-start / c2-end;
  27.         grid-row: r1-start / r3-start;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="box">
  33.       <span>1</span>
  34.       <span>2</span>
  35.       <span>3</span>
  36.       <span>4</span>
  37.       <span>5</span>
  38.       <span>6</span>
  39.       <span>7</span>
  40.       <span>8</span>
  41.       <span>9</span>
  42.     </div>
  43.   </body>
  44. </html>

4. 命名网格区域、设置网格区域及通用PC端布局实战

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: lightblue;
  13.         display: grid;
  14.         grid-template-columns: 60px 1fr 60px;
  15.         grid-template-rows: 30px 1fr 30px;
  16.         /*设置网格区域*/
  17.         grid-template-areas: 
  18.         "header header header"
  19.         "lside main rside"
  20.         "footer footer footer"
  21.         ;
  22.       }
  23.      .header {
  24.        background-color: lightpink;
  25.        /*命名网格区域*/
  26.        grid-area: header;
  27.      }
  28.      .lside {
  29.        background-color: lightsteelblue;
  30.        /*命名网格区域*/
  31.        grid-area: lside;
  32.      }
  33.      .main {
  34.        background-color: lightsalmon;
  35.        /*命名网格区域*/
  36.        grid-area: main;
  37.      }
  38.      .rside {
  39.        background-color: khaki;
  40.        /*命名网格区域*/
  41.        grid-area: rside;
  42.      }
  43.      .footer {
  44.        background-color: lightgrey;
  45.        /*命名网格区域*/
  46.        grid-area: footer;
  47.      }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="box">
  52.       <span class="header">1</span>
  53.       <span class="lside">2</span>
  54.       <span class="main">3</span>
  55.       <span class="rside">4</span>
  56.       <span class="footer">5</span>
  57.     </div>
  58.   </body>
  59. </html>

六、课程总结

  • 今天学习了 CSS 的 Grid 网格布局，通过上课认真听讲和认真完成老师布置的作业，使得我对 CSS 的理解和运用更加深入和熟悉。最主要的知识点是明白了网格布局是由水平（行）和垂直（列）线集合对元素进行编排的原理，以及了解并熟悉了 Grid 布局常见属性如 grid-template-columns、grid-template-rows、grid-template-areas 等的用法。
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：grid布局不能用在ie上, 还好, ie在国内不到5%份额了, 消失指日可待, 微软的Edge和chrome内核也一样的, 放心使用吧
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录