search

博客列表 >html学习：第11章 grid布局基础知识（补）

html学习：第11章 grid布局基础知识（补）

王小飞
王小飞原创
2020年05月22日 17:42:39713浏览

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

效果

上一条：JS - Ajax基础与实战下一条：JavaScript基本控制流程，对象数组/数组遍历方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多