search

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

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

王小飞
王小飞原创
2020年05月21日 17:53:56603浏览

创建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. <!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, 120px);
  43.         grid-template-rows: repeat(auto-fill, 120px);
  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>

效果：

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

代码：

  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.       }
  33.       /* 简写 */
  34.       .item.item2 {
  35.         background-color: lightpink;
  36.         /* grid-row-start: 1;
  37.         grid-row-end: 3;
  38.         grid-column-start: 3;
  39.         grid-column-end: 5; */
  41.         grid-row: 1 / 3;
  42.         grid-column: 3 / 5;
  43.       }
  45.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  46.       .item.item3 {
  47.         background-color: yellow;
  49.         grid-row: 3 / span 2;
  50.         grid-column: 1 / span 2;
  51.       }
  53.       .item.item4 {
  54.         background-color: lightgrey;
  55.         /* grid-row-start: 3; */
  56.         grid-row-end: span 2;
  57.         /* grid-column-start: 3; */
  58.         grid-column-end: span 2;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="container">
  64.       <div class="item item1">1</div>
  65.       <div class="item item2">2</div>
  66.       <div class="item item3">3</div>
  67.       <div class="item item4">4</div>
  68.     </div>
  69.   </body>
  70. </html>

效果：

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

代码：

  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>

效果：

默认网格区域

代码：

  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>

效果:

命名网格区域

代码：

  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>

效果:

网格区域线的默认名称

代码：

  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>

效果:

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

代码：

  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>

效果:

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

代码：

  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>

效果:

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

代码：

  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>

效果:

上一条：JS数组与对象的常用方法 & JSON.stringify() 的用法下一条：Composer更换阿里全量镜像
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多