Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid 布局基础知识详解
Blogger Information
Blog 26
fans 0
comment 0
visits 21915
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
Grid 布局基础知识详解
溪边小树
Original
426 people have browsed it

Grid 布局

准备工作

  • 编辑器: VSCODE
  • 浏览器: FireFox
  • 浏览器同步插件: Live Server

1. 基本术语

  • 容器: 使用网格布局的元素
  • 项目: 容器中的子元素
  • 网格线: 将容器划分为行与列的直线
  • 显式网络: 由用户根据项目数量指示容器生成的网格
  • 隐式网格: 由容器根据项目数量自动生成的网格
  • 单元格: 项目放置的具体空间
  • 网格区域: 一个以上的单元格组成的矩形区域

网格布局的基本步骤: 1. 生成网格; 2. 放置项目

2. 创建 Grid 容器

  • display: 声明使用网格布局的容器元素
  • grid-auto-flow: 声明项目在网格中自动填充方案(行优先/列优先)
  • grid-template-columns/rows: 在容器中显式地划分行与列,生成指定数量的单元格来放置项目
  • grid-auto-rows/columns: 根据项目数量,在容器中隐式生成行与列来放置它们

3. 设置单元格数量与尺寸

  • 固定宽度px: 固定大小
  • 百分比%: 以容器大小为依据来计算
  • 自动计算auto: 由浏览器决定长度
  • 比例fr: 将容器空间按比例分配给每一个单元格
  • 区间minmax(min,max): 设置单元格尺寸变化范围
  • 重复生成repeat(): 快速生成相同大小单元格的
  • 自动填充auto-fill: 单元格固定,但容器不确定时,可以让一行/列容纳尽可能多的项目

4. 将项目填充到指定单元格中

4.1 使用默认网格线划分单元格

  • 默认从左上角开始,从左到右,从上到下,依次从 1 开始编号
  • 如果从右下角开始,由下向上,由右向左,依次由从-1 开始编号
  • 根据数字网格线,可以将项目放到网格线形成的封闭矩形区域中

4.2 使用命名网格线划分单元格

  • 使用语义化的名称替代容器自动生成的数字网线线编号
  • 同一条网络线可以有多个别名

4.3 重复设置单元格时, 命名网格线会自动添加索引

  • repeat(3, [col-start] 100px [col-end]): 只需设置命名前缀,编号会自动生成
  • grid-column-end: col-end 3;: 前缀加索引就可以引用到自动生成的命名网格线

5. 将项目填充到网格区域中

5.1 默认网格区域

  • 设置项目属性grid-area: 将项目填充到指定容器的区域中
  • 语法: grid-area: 起始行 / 起始列 / 结束行 / 结束列

5.2 命名网格区域

  • 可以为每一个网格区域设置一个语义化的名称
  • 具有名称的网络区域称之为命名区域
  • 名称相同的网格区域会合并, 形成更大的区域空间
  • 项目设置的区域名称后,会自动填充到容器中应对的命名区域中

5.3 网格区域占位符

  • 当项目默认已到填充到正确的区域中,无需设置时,可使用”.”做为占位符

5.4 命名网格区域线默认名称

  • 区域起始行/列: 区域名称-start, 如header-start / header-start,表示区域起始行/区域起始列
  • 区域结束行/列: 区域名称-end,如header-end / header-end,表示区域结束行/区域结束列

6. 设置所有项目在容器中的对齐方式

  • justify-content: 设置所有项目在容器中水平方向的对齐方式
  • align-content: 设置所有项目在容器中垂直方向的对齐方式
  • place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式

7. 设置所有项目在单元格或网格区域内的对齐方式

  • justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
  • align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
  • place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式
  • demo11.html: 所有项目在单元格中的对齐方式

8. 设置某个项目在单元格或网格区域内的对齐方式

  • justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
  • align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式
  • place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式

9. 设置容器中行与列之间的间距/间隙

  • column-gap: 列间距
  • row-gap: 行间距
  • gap: 行间距 列间距: 简写
  • gap: 值: 行与列相等,可只写一个值

示例1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>创建grid容器</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         /* 设置项目在网格中的填充方案, 默认行优先 */
  17.         grid-auto-flow: row;
  18.         /* grid-auto-flow: column; */
  19.         /* 显式地划分行与列, 三列二行 */
  20.         grid-template-columns: 100px 100px 100px;
  21.         grid-template-rows: 100px 100px;
  22.         /* 对于放置不下的项目,会隐式生成单元格 */
  23.         grid-auto-rows: auto;
  24.         grid-auto-rows: 150px;
  25.       }
  27.       .item {
  28.         background-color: lightblue;
  29.         font-size: 2rem;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item item1">1</div>
  36.       <div class="item item2">2</div>
  37.       <div class="item item3">3</div>
  38.       <div class="item item4">4</div>
  39.       <div class="item item5">5</div>
  40.       <div class="item item6">6</div>
  41.       <div class="item item7">7</div>
  42.     </div>
  43.   </body>
  44. </html>

示例2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置单元格的数量与大小</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  17.         /* 固定值 */
  18.         grid-template-columns: 100px 100px 100px;
  19.         grid-template-rows: 100px 100px 100px;
  21.         /* 百分比 */
  22.         grid-template-columns: 20% 30% auto;
  23.         grid-template-rows: 100px auto 100px;
  25.         /* 比例 */
  26.         grid-template-columns: 1fr 2fr 2fr;
  27.         grid-template-rows: 1fr auto 2fr;
  29.         /* 重复设置 */
  30.         grid-template-columns: repeat(3, 100px);
  31.         grid-template-rows: repeat(3, 100px);
  33.         /* 按分组来设置: (50px-100px) */
  34.         /* 50px 100px 50px 100px */
  35.         grid-template-columns: repeat(2, 50px 100px);
  37.         /* 弹性 */
  38.         grid-template-columns: repeat(2, minmax(50px, 100px));
  39.         grid-template-rows: repeat(3, minmax(150px, 1fr));
  41.         /* 自动填充 */
  42.         grid-template-columns: repeat(auto-fill, 100px);
  43.         grid-template-rows: repeat(auto-fill, 100px);
  44.       }
  46.       .item {
  47.         background-color: lightblue;
  48.         font-size: 2rem;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <div class="item item1">1</div>
  55.       <div class="item item2">2</div>
  56.       <div class="item item3">3</div>
  57.       <div class="item item4">4</div>
  58.       <div class="item item5">5</div>
  59.       <div class="item item6">6</div>
  60.       <div class="item item7">7</div>
  61.     </div>
  62.   </body>
  63. </html>

示例3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用默认的网格线来划分单元格</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(4, 1fr);
  17.         grid-template-rows: repeat(4, 1fr);
  18.       }
  20.       .item {
  21.         font-size: 2rem;
  22.       }
  23.       .item.item1 {
  24.         background-color: lightgreen;
  26.         grid-row-start: 1;
  27.         grid-row-end: 3;
  28.         grid-column-start: 1;
  29.         grid-column-end: 3;
  31.         /* grid-row-start: -1;
  32.         grid-row-end: -3;
  33.         grid-column-start: -1;
  34.         grid-column-end: -3; */
  36.         /* grid-row-start: 2;
  37.         grid-row-end: 4;
  38.         grid-column-start: 2;
  39.         grid-column-end: 4;
  41.         grid-row-start: 1;
  42.         grid-row-end: -1;
  43.         grid-column-start: 1;
  44.         grid-column-end: -1; */
  45.       }
  47.       /* 简写 */
  48.       .item.item2 {
  49.         background-color: lightpink;
  50.         /* grid-row-start: 1;
  51.         grid-row-end: 3;
  52.         grid-column-start: 3;
  53.         grid-column-end: 5; */
  55.         grid-row: 1 / 3;
  56.         grid-column: 3 / 5;
  57.       }
  59.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  60.       .item.item3 {
  61.         background-color: yellow;
  62.         /*grid-row-start: 3;
  63.         grid-row-end: span 2;
  64.         grid-column-start: 1;
  65.         grid-column-end: span 2; */
  67.         grid-row: 3 / span 2;
  68.         grid-column: 1 / span 2;
  69.       }
  71.       .item.item4 {
  72.         background-color: lightgrey;
  73.         /* grid-row-start: 3; */
  74.         grid-row-end: span 2;
  75.         /* grid-column-start: 3; */
  76.         grid-column-end: span 2;
  77.       }
  78.     </style>
  79.   </head>
  80.   <body>
  81.     <div class="container">
  82.       <div class="item item1">1</div>
  83.       <div class="item item2">2</div>
  84.       <div class="item item3">3</div>
  85.       <div class="item item4">4</div>
  86.     </div>
  87.   </body>
  88. </html>

示例4

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>使用命名网格线来划分单元格</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
  17.         grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  18.       }
  20.       .item {
  21.         font-size: 2rem;
  22.       }
  23.       .item.item1 {
  24.         background-color: lightgreen;
  25.         /* 默认就是跨越一行/一列,所以可以省略 */
  26.         grid-row-start: r2-start;
  27.         grid-row-start: r1-end;
  28.         grid-column-start: c3-start;
  29.       }
  31.       /* 简写 */
  32.       .item.item2 {
  33.         background-color: lightpink;
  34.         /* grid-row: r1-start / r2-start;
  35.         grid-column: c1-start / c3-end; */
  37.         grid-column-end: span 3;
  38.       }
  40.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  41.       .item.item3 {
  42.         background-color: yellow;
  43.         grid-row-end: span 2;
  44.         grid-column-end: span 2;
  45.       }
  47.       .item.item4 {
  48.         background-color: lightgrey;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <div class="item item1">1</div>
  55.       <div class="item item2">2</div>
  56.       <div class="item item3">3</div>
  57.       <div class="item item4">4</div>
  58.     </div>
  59.   </body>
  60. </html>

示例5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>默认网格区域</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(4, 1fr);
  17.         grid-template-rows: repeat(4, 1fr);
  18.       }
  20.       .item {
  21.         font-size: 2rem;
  22.       }
  23.       .item.item1 {
  24.         background-color: lightgreen;
  25.         /* grid-area: 1 / 1 / 2 / 5; */
  26.         /* 用偏移量进行简化 */
  27.         /* grid-area: 1 / 1 / span 1 / span 4; */
  28.         /* 是从当前位置开始的填充 */
  29.         grid-area: span 1 / span 4;
  30.       }
  32.       /* 简写 */
  33.       .item.item2 {
  34.         background-color: lightpink;
  36.         /* grid-area: 2 / 1 / 4 / 2; */
  37.         /* grid-area: span 2 / span 1; */
  38.         /* 默认就是偏移一行/一列 */
  39.         grid-area: span 2;
  40.       }
  42.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  43.       .item.item3 {
  44.         background-color: yellow;
  45.       }
  47.       .item.item4 {
  48.         background-color: lightgrey;
  49.         /* grid-area: row-start / col-start / row-end / col-end; */
  50.       }
  51.       .item.item5 {
  52.         background-color: violet;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div class="container">
  58.       <div class="item item1">1</div>
  59.       <div class="item item2">2</div>
  60.       <div class="item item3">3</div>
  61.       <div class="item item4">4</div>
  62.       <div class="item item5">5</div>
  63.     </div>
  64.   </body>
  65. </html>

示例6

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>命名网格区域</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: 80px 1fr 80px;
  17.         grid-template-rows: 40px 1fr 40px;
  19.         /* 设置命名网格区域, 相同名称的命名区域会合并 */
  20.         grid-template-areas:
  21.           "hello hello hello"
  22.           "left main right"
  23.           "footer footer footer";
  24.       }
  26.       .item {
  27.         font-size: 2rem;
  28.       }
  29.       .item.item1 {
  30.         background-color: lightgreen;
  31.         grid-area: hello;
  32.       }
  34.       /* 简写 */
  35.       .item.item2 {
  36.         background-color: lightpink;
  37.         grid-area: left;
  38.       }
  40.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  41.       .item.item3 {
  42.         background-color: yellow;
  43.         grid-area: main;
  44.       }
  46.       .item.item4 {
  47.         background-color: lightgrey;
  48.         grid-area: right;
  49.       }
  50.       .item.item5 {
  51.         background-color: violet;
  52.         grid-area: footer;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div class="container">
  58.       <div class="item item1">1</div>
  59.       <div class="item item2">2</div>
  60.       <div class="item item3">3</div>
  61.       <div class="item item4">4</div>
  62.       <div class="item item5">5</div>
  63.     </div>
  64.   </body>
  65. </html>

示例7

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>网格区域占位符</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: 80px 1fr 80px;
  17.         grid-template-rows: 40px 1fr 40px;
  19.         /* 设置命名网格区域, 相同名称的命名区域会合并 */
  20.         grid-template-areas:
  21.           "hello hello hello"
  22.           ". . . "
  23.           "footer footer footer";
  24.       }
  26.       .item {
  27.         font-size: 2rem;
  28.       }
  29.       .item.item1 {
  30.         background-color: lightgreen;
  31.         grid-area: hello;
  32.       }
  34.       /* 简写 */
  35.       .item.item2 {
  36.         background-color: lightpink;
  37.         /* 多余 */
  38.         /* grid-area: left; */
  39.       }
  41.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  42.       .item.item3 {
  43.         background-color: yellow;
  44.         /* grid-area: main; */
  45.       }
  47.       .item.item4 {
  48.         background-color: lightgrey;
  49.         /* grid-area: right; */
  50.       }
  51.       .item.item5 {
  52.         background-color: violet;
  53.         grid-area: footer;
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div class="container">
  59.       <div class="item item1">1</div>
  60.       <div class="item item2">2</div>
  61.       <div class="item item3">3</div>
  62.       <div class="item item4">4</div>
  63.       <div class="item item5">5</div>
  64.     </div>
  65.   </body>
  66. </html>

示例8

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>网格区域线的默认名称</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: 80px 1fr;
  17.         grid-template-rows: 40px 1fr 40px;
  19.         /* 设置命名网格区域, 相同名称的命名区域会合并 */
  20.         grid-template-areas:
  21.           "header header"
  22.           ". . "
  23.           "footer footer";
  24.       }
  26.       .item {
  27.         font-size: 2rem;
  28.       }
  29.       .item.item1 {
  30.         background-color: lightgreen;
  31.         grid-area: header-start / header-start / header-end / header-end;
  32.       }
  34.       /* 简写 */
  35.       .item.item2 {
  36.         background-color: lightpink;
  37.         /* 多余 */
  38.         /* grid-area: left; */
  39.       }
  41.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  42.       .item.item3 {
  43.         background-color: yellow;
  44.         /* grid-area: main; */
  45.       }
  47.       .item.item4 {
  48.         background-color: lightgrey;
  49.         grid-area: footer-start / footer-start / footer-end / footer-end;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container">
  55.       <div class="item item1">1</div>
  56.       <div class="item item2">2</div>
  57.       <div class="item item3">3</div>
  58.       <div class="item item4">4</div>
  59.     </div>
  60.   </body>
  61. </html>

示例9

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置单元格在容器中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 50px);
  17.         grid-template-rows: repeat(3, 50px);
  19.         justify-content: end;
  20.         align-content: end;
  22.         justify-content: center;
  23.         align-content: center;
  25.         justify-content: space-between;
  26.         justify-content: space-around;
  27.         justify-content: space-evenly;
  29.         align-content: space-between;
  30.         align-content: space-around;
  31.         align-content: space-evenly;
  33.         /* justify-content: stretch;
  34.         grid-template-columns: repeat(3, auto);
  35.         align-content: stretch;
  36.         grid-template-rows: repeat(3, 1fr); */
  38.         /* place-content: 垂直对齐 水平对齐; */
  39.         place-content: center start;
  40.         place-content: center center;
  41.         place-content: center;
  42.       }
  44.       .item {
  45.         background-color: violet;
  46.         font-size: 2rem;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <div class="item item1">1</div>
  53.       <div class="item item2">2</div>
  54.       <div class="item item3">3</div>
  55.       <div class="item item4">4</div>
  56.       <div class="item item1">5</div>
  57.       <div class="item item2">6</div>
  58.       <div class="item item3">7</div>
  59.       <div class="item item4">8</div>
  60.       <div class="item item4">9</div>
  61.     </div>
  62.   </body>
  63. </html>

示例10

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置项目在单元格中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 1fr);
  17.         grid-template-rows: repeat(3, 1fr);
  19.         justify-items: stretch;
  20.         align-items: stretch;
  22.         justify-items: start;
  23.         align-items: center;
  25.         justify-items: center;
  26.         align-items: center;
  28.         /* place-items: 垂直  水平; */
  29.         place-items: start end;
  30.         place-items: center center;
  31.         place-items: center;
  32.       }
  34.       .item {
  35.         width: 50px;
  36.         height: 50px;
  37.         background-color: violet;
  38.         font-size: 2rem;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="container">
  44.       <div class="item item1">1</div>
  45.       <div class="item item2">2</div>
  46.       <div class="item item3">3</div>
  47.       <div class="item item4">4</div>
  48.       <div class="item item1">5</div>
  49.       <div class="item item2">6</div>
  50.       <div class="item item3">7</div>
  51.       <div class="item item4">8</div>
  52.       <div class="item item4">9</div>
  53.     </div>
  54.   </body>
  55. </html>

示例11

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置某个项目在单元格中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 1fr);
  17.         grid-template-rows: repeat(3, 1fr);
  19.         justify-items: stretch;
  20.         align-items: stretch;
  22.         justify-items: start;
  23.         align-items: center;
  25.         justify-items: center;
  26.         align-items: center;
  28.         /* place-items: 垂直  水平; */
  29.         place-items: start end;
  30.         place-items: center center;
  31.         place-items: center;
  32.       }
  34.       .item {
  35.         width: 50px;
  36.         height: 50px;
  37.         background-color: violet;
  38.         font-size: 2rem;
  39.       }
  41.       .item.item5 {
  42.         justify-self: end;
  43.         align-self: end;
  45.         place-self: center end;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="container">
  51.       <div class="item item1">1</div>
  52.       <div class="item item2">2</div>
  53.       <div class="item item3">3</div>
  54.       <div class="item item4">4</div>
  55.       <div class="item item5">5</div>
  56.       <div class="item item6">6</div>
  57.       <div class="item item7">7</div>
  58.       <div class="item item8">8</div>
  59.       <div class="item item9">9</div>
  60.     </div>
  61.   </body>
  62. </html>

示例12

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>设置某个项目在单元格中的对齐方式</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 1fr);
  17.         grid-template-rows: repeat(3, 1fr);
  19.         /* column-gap: 5px; */
  20.         /* row-gap: 15px; */
  22.         /* gap: 15px 5px; */
  23.         /* gap: 5px 5px; */
  24.         gap: 5px;
  25.       }
  27.       .item {
  28.         background-color: violet;
  29.         font-size: 2rem;
  31.         /* margin: 5px; */
  32.         /* padding: 5px;
  33.         background-clip: content-box; */
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div class="container">
  39.       <div class="item item1">1</div>
  40.       <div class="item item2">2</div>
  41.       <div class="item item3">3</div>
  42.       <div class="item item4">4</div>
  43.       <div class="item item5">5</div>
  44.       <div class="item item6">6</div>
  45.       <div class="item item7">7</div>
  46.       <div class="item item8">8</div>
  47.       <div class="item item9">9</div>
  48.     </div>
  49.   </body>
  50. </html>

课程小结

本次课程较为详细地讲述了Grid布局的相关内容，老师列举了很多实用案例，帮助我了解网页元素布局有了更为清晰的认识，讲解细致，主要内容包括：
1 、主要概念需理解：

  • 容器: 使用网格布局的元素
  • 项目: 容器中的子元素
  • 网格线: 将容器划分为行与列的直线
  • 显式网络: 由用户根据项目数量指示容器生成的网格
  • 隐式网格: 由容器根据项目数量自动生成的网格
  • 单元格: 项目放置的具体空间
  • 网格区域: 一个以上的单元格组成的矩形区域

2、主要的属性设置：

  • display: 声明使用网格布局的容器元素
  • grid-auto-flow: 声明项目在网格中自动填充方案(行优先/列优先)
  • grid-template-columns/rows: 在容器中显式地划分行与列,生成指定数量的单元格来放置项目
  • grid-auto-rows/columns: 根据项目数量,在容器中隐式生成行与列来放置它们

3、单元格数量与尺寸
使用默认网格线划分单元格；
使用命名网格线划分单元格；
重复设置单元格时, 命名网格线会自动添加索引。

4、网格区域
默认网格区域、命名网格区域、网格区域占位符、命名网格区域线默认名称。

5、设置所有项目在容器中的对齐方式、设置所有项目在单元格或网格区域内的对齐方式、设置某个项目在单元格或网格区域内的对齐方式、设置容器中行与列之间的间距/间隙。
通过本次学习，开阔了眼界，感觉到了网页布局的“神奇”之处，增加了学习兴趣。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这个作业可以当手册了
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