Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html学习：第11章 grid布局基础知识（补）
Blogger Information
Blog 52
fans 0
comment 3
visits 42426
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
html学习：第11章 grid布局基础知识（补）
王小飞
Original
708 people have browsed it

创建grid容器

介绍：

  1.         /* 创建grid容器 */
  2.         display: grid;

代码：

  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: 500px;
  11.         height: 500px;
  12.         /* 背景颜色 */
  13.         background-color: wheat;
  15.         /* 创建grid容器 */
  16.         display: grid;
  17.         /* 设置项目在网格中的填充方案, 默认行优先 */
  18.         grid-auto-flow: row;
  19.         /* grid-auto-flow: column; 这个是列优先*/
  20.         /* 显式地划分行与列, 三列二行 */
  22.         /* grid-template网格模板columns列  值 第一列 第二列 第三列*/
  23.         grid-template-columns: 100px 100px 100px;
  24.         /* grid-template网格模板rows行  值 第一行 第二行*/
  25.         grid-template-rows: 100px 100px 100px;
  26.         /* 对于放置不下的项目,会隐式生成单元格 */
  27.         grid-auto-rows: auto; /*默认*/
  28.         grid-auto-rows: 150px; /*自定义放不下的项目*/
  29.       }
  31.       .item {
  32.         /* 背景颜色 */
  33.         background-color: lightblue;
  34.         /* 文字2倍大 */
  35.         font-size: 2rem;
  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 class="item item7">8</div>
  49.       <div class="item item7">9</div>
  50.     </div>
  51.   </body>
  52. </html>

效果：

设置单元格的数量与大小

介绍：

1.固定值

2.百分比

3.比例

4.重复设置

5.按分组来设置

6.弹性

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;
  17.         /* 固定值 */
  19.         /* grid-template网格模板columns列  值 第一列 第二列 第三列*/
  20.         grid-template-columns: 100px 100px 100px;
  21.         /* grid-template网格模板rows行  值 第一行 第二行*/
  22.         grid-template-rows: 100px 100px 100px;
  24.         /* 百分比  第一列用百分之20 第二列用百分之30 第三列自动*/
  25.         grid-template-columns: 20% 30% auto;
  26.         /* 高度设置 第一行100 第2行自动 第三行100 */
  27.         grid-template-rows: 100px auto 100px;
  29.         /* 比例 1fr 等于一比一 每行每列都一样宽或者高*/
  30.         grid-template-columns: 1fr 2fr 2fr;
  31.         grid-template-rows: 1fr auto 2fr;
  33.         /* 重复设置 */
  34.         /* repeat(显示几个, 定义的值); */
  35.         grid-template-columns: repeat(3, 100px);
  36.         /* repeat(显示几个, 定义的值); */
  37.         grid-template-rows: repeat(3, 100px);
  39.         /* 按分组来设置: (50px-100px) repeat(重复次数, 这里为一个组的值第一列50px 第二列100px);*/
  40.         /* 会生成4列 50px 100px 50px 100px */
  41.         grid-template-columns: repeat(2, 50px 100px);
  43.         /* 弹性 */
  44.         /* repeat(重复次数, minmax(最小值50px, 最大值100px)); */
  45.         grid-template-columns: repeat(2, minmax(50px, 100px));
  47.         /* 这里是设置高度  repeat(重复次数, minmax(最小150px, 1fr));*/
  48.         grid-template-rows: repeat(3, minmax(150px, 1fr));
  50.         /* 自动填充 */
  51.         /* repeat(从左到右auto-fill, 宽度120px); */
  52.         grid-template-columns: repeat(auto-fill, 50px);
  53.         /*行  repeat(从左到右auto-fill, 宽度120px); */
  54.         grid-template-rows: repeat(auto-fill, 50px);
  55.       }
  57.       .item {
  58.         background-color: lightblue;
  59.         font-size: 2rem;
  60.       }
  61.     </style>
  62.   </head>
  63.   <body>
  64.     <div class="container">
  65.       <div class="item item1">1</div>
  66.       <div class="item item2">2</div>
  67.       <div class="item item3">3</div>
  68.       <div class="item item4">4</div>
  69.       <div class="item item5">5</div>
  70.       <div class="item item6">6</div>
  71.       <div class="item item7">7</div>
  72.       <div class="item item7">8</div>
  73.       <div class="item item7">9</div>
  74.     </div>
  75.   </body>
  76. </html>

效果：

使用默认的网格线来划分单元格

介绍

  1. /* 选中起始行 第一行起 */
  2.         grid-row-start: 1;
  3.         /* 选中结束行 第三行 */
  4.         grid-row-end: 3;
  5.         /* 选中起始列 第一行起 */
  6.         grid-column-start: 1;
  7.         /* 选中结束列 第三行 */
  8.         grid-column-end: 3;
  9. 代码：

简写：

  1.         /* 简写 起始行 结束行 */
  2.         grid-row: 1 / 3;
  3.         /* 简写 起始列 结束列 */
  4.         grid-column: 3 / 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.         /* repeat(生成四个列4, 按比例1fr); */
  17.         grid-template-columns: repeat(4, 1fr);
  18.         /* repeat(生成四个行4, 按比例1fr); */
  19.         grid-template-rows: repeat(4, 1fr);
  20.       }
  22.       .item {
  23.         font-size: 2rem;
  24.       }
  25.       /* 选中第一个 将第一个占据4个单元格 */
  26.       .item.item1 {
  27.         background-color: lightgreen;
  28.         /* 选中起始行 第一行起 */
  29.         grid-row-start: 1;
  30.         /* 选中结束行 第三行 */
  31.         grid-row-end: 3;
  32.         /* 选中起始列 第一行起 */
  33.         grid-column-start: 1;
  34.         /* 选中结束列 第三行 */
  35.         grid-column-end: 3;
  37.         /* 按反向选择 放最后
  38.         grid-row-start: -1;
  39.         grid-row-end: -3;
  40.         grid-column-start: -1;
  41.         grid-column-end: -3; */
  43.         /* 放到中间
  44.         grid-row-start: 2;
  45.         grid-row-end: 4;
  46.         grid-column-start: 2;
  47.         grid-column-end: 4;
  48.         选择全部占据 结尾可以选择负-1 代表最后
  49.         grid-row-start: 1;
  50.         grid-row-end: -1;
  51.         grid-column-start: 1;
  52.         grid-column-end: -1; */
  53.       }
  55.       /* 选中第二个 简写 */
  56.       .item.item2 {
  57.         background-color: lightpink;
  59.         /* 简写 起始行 结束行 */
  60.         grid-row: 1 / 3;
  61.         /* 简写 起始列 结束列 */
  62.         grid-column: 3 / 5;
  63.       }
  65.       /* 选中第三个 使用偏移量来简化, 将第三个移动到左下角 */
  66.       .item.item3 {
  67.         background-color: yellow;
  68.         /*行 span表示跨越 span2 表示跨越2行 */
  69.         grid-row: 3 / span 2;
  70.         /*列 span表示跨越 span2 表示跨越2行 */
  71.         grid-column: 1 / span 2;
  72.       }
  73.       /* 选中4 */
  74.       .item.item4 {
  75.         background-color: lightgrey;
  76.         /* 行 直接跨越2行grid-row-end: 3; */
  77.         grid-row-end: span 2;
  78.         /*列 直接跨越2列grid-column-end: 3; */
  79.         grid-column-end: span 2;
  80.       }
  81.     </style>
  82.   </head>
  83.   <body>
  84.     <div class="container">
  85.       <div class="item item1">1</div>
  86.       <div class="item item2">2</div>
  87.       <div class="item item3">3</div>
  88.       <div class="item item4">4</div>
  89.     </div>
  90.   </body>
  91. </html>
  93. 练习代码：
  94.       .item.item1 {
  95.         background-color: lightgreen;
  96.         /* 选中起始行 第一行起 */
  97.         grid-row-start: 1;
  98.         /* 选中结束行 第三行 */
  99.         grid-row-end: -1;
  100.         /* 选中起始列 第一行起 */
  101.         grid-column-start: 1;
  102.         /* 选中结束列 第三行 */
  103.         grid-column-end: 2;
  104.       .item.item2 {
  105.         background-color: lightpink;
  107.         /* 简写 起始行 结束行 */
  108.         grid-row: 1 / 2;
  109.         /* 简写 起始列 结束列 */
  110.         grid-column: 2 / span 3;
  111.       }
  113.       /* 选中第三个 使用偏移量来简化, 将第三个移动到左下角 */
  114.       .item.item3 {
  115.         background-color: yellow;
  116.         /*行 span表示跨越 span2 表示跨越2行 */
  117.         grid-row: 2 / -1;
  118.         /*列 span表示跨越 span2 表示跨越2行 */
  119.         grid-column: 1 / span -1;

练习效果：

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

命名方法介绍：

  1.  /* [c1代表第一列-start代表起始线]  [c1第一列-end第一列结束县 c2第二列-start第二列起始] ... */
  2.         grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
  3.         /* [c1代表第一行-start代表起始线]  [c1第一行-end第一行结束县 c2第二行-start第二行起始] ... */
  4.         grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];

代码：

  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.         /* [c1代表第一列-start代表起始线]  [c1第一列-end第一列结束县 c2第二列-start第二列起始] ... */
  17.         grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
  18.         /* [c1代表第一行-start代表起始线]  [c1第一行-end第一行结束县 c2第二行-start第二行起始] ... */
  19.         grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  20.       }
  22.       .item {
  23.         font-size: 2rem;
  24.       }
  25.       .item.item1 {
  26.         background-color: lightgreen;
  27.         /* 默认就是跨越一行/一列,所以可以省略 */
  28.         /* 开始行 第一行开始 第二行结束*/
  29.         grid-row-start: span 4;
  31.         /* 开始列 第三列开始*/
  32.         grid-column-start: span 1;
  33.       }
  35.       /* 简写 */
  36.       .item.item2 {
  37.         background-color: lightpink;
  38.         grid-column-start: 2;
  39.         /* grid-column: c1-start / c3-end;  */
  40.         /* 直接跨越三行 */
  41.         grid-column-end: span 3;
  42.       }
  44.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  45.       .item.item3 {
  46.         background-color: yellow;
  47.         /* 跨越2行 */
  48.         grid-row-end: span 2;
  49.         /* 跨越2列 */
  50.         grid-column-end: span 2;
  51.       }
  53.       .item.item4 {
  54.         background-color: lightgrey;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div class="container">
  60.       <div class="item item1">1</div>
  61.       <div class="item item2">2</div>
  62.       <div class="item item3">3</div>
  63.       <div class="item item4">4</div>
  64.     </div>
  65.   </body>
  66. </html>

练习效果：

默认网格区域

介绍

  • grid-area（网格区域）：第一行开始 / 第一行结束 / 第一列开始 / 第一列介绍

练习代码：

  1.       .item.item1 {
  2.         background-color: lightgreen;
  3.         grid-area: span 4 / span 4;
  5.               .item.item2 {
  6.         background-color: lightpink;
  7.         grid-area: span 1 / span 4;
  8.       }
  9.       }

效果:

命名网格区域 能够快速写出网页布局

介绍

  • grid-area: 命名; 给每个区域命名
  • 使用grid-template-areas: 直接写在容器里面

代码：

  1. .container {
  2.         /* 容器大小 */
  3.         width: 400px;
  4.         height: 400px;
  5.         background-color: wheat;
  7.         /* 创建grid容器 */
  8.         display: grid;
  9.         /* 第一列80 第二列自动计算 第三列80 */
  10.         grid-template-columns: 80px 1fr 80px;
  11.         /* 第一行40 第二行自动计算 第三行40 */
  12.         grid-template-rows: 40px 1fr 40px;
  14.         /* 设置命名网格区域, 相同名称的命名区域会合并 */
  15.         grid-template-areas:
  16.           "hello hello hello"
  17.           "left main right"
  18.           "footer footer footer";
  19.       }

网格区域占位符

介绍：

第二行的命名可以不写用点代替，他会根据grid-template-columns: 80px 1fr 80px;grid-template-rows: 40px 1fr 40px;的设置自动计算。直接去掉名称即可

代码：

  1.         grid-template-areas:
  2.           "hello hello hello"
  3.           ". . . "
  4.           "footer footer footer";

效果:

网格区域线的默认名称

介绍：

默认的名称header-start / header-start / header-end / header-end; 可以直接使用在grid-area: 命名 达到相同的效果

代码：

  1.       .item.item1 {
  2.         background-color: lightgreen;
  3.         grid-area: header-start / header-start / header-end / header-end;
  4.       }
  6.       /* 简写 */
  7.       .item.item2 {
  8.         background-color: lightpink;
  9.         /* 多余 */
  10.         /* grid-area: left; */
  11.       }
  13.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  14.       .item.item3 {
  15.         background-color: yellow;
  16.         /* grid-area: main; */
  17.       }
  19.       .item.item4 {
  20.         background-color: lightgrey;
  21.         grid-area: footer-start / footer-start / footer-end / footer-end;

效果:

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

介绍

  1.         /* 水平方向对齐 */
  2.         justify-content: end;
  3.         /* 垂直方向对齐 */
  4.         align-content: end;
  5.         /* center居中 */
  6.         justify-content: center;
  7.         align-content: center;
  8.         /* 水平方向两端对齐space-between; */
  9.         justify-content: space-between;
  10.         /* 水平方向分散对齐space-around */
  11.         justify-content: space-around;
  12.         /* 水平方向平行对齐space-evenly */
  13.         justify-content: space-evenly;
  14.         /* 纵向两端对齐space-between */
  15.         align-content: space-between;
  16.         /* 纵向分散对齐space-around; */
  17.         align-content: space-around;
  18.         /* 纵向平行对齐space-evenly; */
  19.         align-content: space-evenly;
  20.         /* place-content: 垂直对齐 水平对齐; */
  21.         place-content: center start;

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

介绍：
/ 水平平设置靠左 /
justify-items: stretch;
/ 垂直方向 /
align-items: stretch;
/ 水平靠左 /
justify-items: start;
/ 垂直居中 /
align-items: center;
/ 水平居中 /
justify-items: center;
/ 垂直居中 /
align-items: center;

以上都不常用

常用的：

  1. /* z直接设置全部居中 */
  2. place-items: center;

效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid现在的兼容性已经很好了, 只要不太古老的浏览器都没问题
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