简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Web 前端 - CSS - Grid 网格布局及通用PC端布局实战

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

郴
郴原创
2020年04月16日 11:43:041250浏览

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 布局（网格布局）实战项目下一条：PHP 基本认识 变量定义与输出
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多