简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Web 前端 - CSS - Grid 网格布局及通用PC端布局实战
Blogger Information
Blog 33
fans 0
comment 0
visits 27663
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Web 前端 - CSS - Grid 网格布局及通用PC端布局实战
郴
Original
1251 people have browsed it

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 等的用法。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid布局不能用在ie上, 还好, ie在国内不到5%份额了, 消失指日可待, 微软的Edge和chrome内核也一样的, 放心使用吧
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！