Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局 （容器建立、网格、区域、设置单元格数量大小）
Blogger Information
Blog 15
fans 2
comment 0
visits 35300
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布局 （容器建立、网格、区域、设置单元格数量大小）
w™下載一個妳
Original
2385 people have browsed it

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: rgb(85, 124, 196);
  14.         /* 创建grid容器 */
  15.         display: grid;
  17.         /* 设置项目在网格中的填充方案，默认行优先 */
  18.         grid-auto-flow: row;
  20.         /* 设置项目在网格中的填充方案，列优先 */
  21.         /* grid-auto-flow: column; */
  23.         /* 显示地划分行与列，三列二行 */
  24.         grid-template-columns: 100px 100px 100px;
  25.         grid-template-rows: 100px 100px;
  27.         /* 对于放置不下的项目会隐式生成单元格 */
  28.         grid-auto-rows: auto;
  29.         grid-auto-rows: 160px;
  30.       }
  32.       .item {
  33.         background-color: yellowgreen;
  34.         font-size: 1.8rem;
  35.         text-align: center;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="container">
  41.       <div class="item item1">1</div>
  42.       <div class="item item2">2</div>
  43.       <div class="item item3">3</div>
  44.       <div class="item item4">4</div>
  45.       <div class="item item5">5</div>
  46.       <div class="item item6">6</div>
  47.       <div class="item item7">7</div>
  48.     </div>
  49.   </body>
  50. </html>

1.1创建容器演练图：

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: rgb(85, 124, 196);
  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: 30% 20% auto;
  23.         grid-template-rows: 100px 100px 100px;
  25.         /* 按比例 */
  26.         grid-template-columns: 1fr 1fr 1fr;
  27.         grid-template-rows: 1fr 1fr auto;
  29.         /* 重复设置 */
  30.         grid-template-columns: repeat(3, 100px);
  31.         grid-template-rows: repeat(3, 100px);
  33.         /* 按分组来设置 */
  34.         grid-template-columns: repeat(2, 50px 100px);
  35.         grid-template-rows: 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: yellowgreen;
  48.         font-size: 1.8rem;
  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>

2.1设置单元格的数量与大小演练图：

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: rgb(85, 124, 196);
  13.         grid-template-columns: repeat(4, 1fr);
  14.         grid-template-rows: repeat(4, 1fr);
  16.         /* 创建grid容器 */
  17.         display: grid;
  18.       }
  20.       .item {
  21.         font-size: 1.8rem;
  22.       }
  24.       .item.item1 {
  25.         background-color: yellowgreen;
  26.         /* 开始行数1 */
  27.         grid-row-start: 1;
  28.         /* 结束行数3 */
  29.         grid-row-end: 3;
  30.         /* 开始列数1 */
  31.         grid-column-start: 1;
  32.         /* 结束列数3 */
  33.         grid-column-end: 3;
  35.         /* 反方向开始 */
  36.         /* 开始行数-1 */
  37.         /* grid-row-start: -1; */
  38.         /* 结束行数-3 */
  39.         /* grid-row-end: -3; */
  40.         /* 开始列数1 */
  41.         /* grid-column-start: -1; */
  42.         /* 结束列数3 */
  43.         /* grid-column-end: -3; */
  45.         /* 设置中间区域 */
  46.         /* grid-row-start: 2;
  47.         grid-row-end: 4;
  48.         grid-column-start: 2;
  49.         grid-column-end: 4; */
  51.         /* 完全覆盖所有空间 */
  52.         /* grid-row-start: 1;
  53.         grid-row-end: -1;
  54.         grid-column-start: 1;
  55.         grid-column-end: -1; */
  56.       }
  57.       /* 简写1 */
  58.       .item.item2 {
  59.         background-color: violet;
  60.         grid-row: 1/3;
  61.         grid-column: 3/5;
  62.       }
  64.       /* 使用偏移量来简化，将第三个移到左下角 */
  65.       .item.item3 {
  66.         background-color: turquoise;
  67.         grid-row: 3 / span 2;
  68.         grid-column: 1 / span 2;
  69.       }
  70.       /* 简写最后一个项目占据剩余空间 */
  71.       .item.item4 {
  72.         background-color: tomato;
  73.         grid-row-end: span 2;
  74.         grid-column-end: span 2;
  75.       }
  76.     </style>
  77.   </head>
  78.   <body>
  79.     <div class="container">
  80.       <div class="item item1">1</div>
  81.       <div class="item item2">2</div>
  82.       <div class="item item3">3</div>
  83.       <div class="item item4">4</div>
  84.     </div>
  85.   </body>
  86. </html>

3.1使用默认的网格线来划分单元格演练图：

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>

4.1使用命名网格线来划分单元格演练图：

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>

5.1默认网格区域演练图：

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>

6.1命名网格区域演练图：

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;
  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>

7.1网格区域线的默认名称演练图：

8.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>设置某个项目在单元格中的对齐方式</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>

8.1设置某个项目在单元格中的对齐方式演练图：

9.学习总结

这节课的知识点很多，要花很多时间去消化。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：网格布局的属性非常多, 其实咱们课上只讲了大约一半左右 , 还有许多, 要看手册的, mdn上有
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