简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1224-实例演示全部grid属性

1224-实例演示全部grid属性

世纪天城
世纪天城原创
2020年12月25日 13:16:40788浏览

作业内容：将今晚提及的全部grid属性，进行实例演示，并记住讲过每一个属性值的意义，写出总结

grid是由网格容器/网格项目/网格轨道/轨道间距组成

  1. 网格容器: 由若干个矩形网格单元构成 
  1. 网格项目: 网格容器的子元素,必须放在网络单元中 
  2. 网格单元: 有"单元格"和"网格区域"二种表现形式
  3. 网格轨道: 由多个网格单元组成,根据排列方向有"行轨"和"列轨"之分 
  4. 轨道间距: 容器中轨道之间的间距,有"行轨间距","列轨间距"  */
  6. 注 flex中子元素默认为inline元素,grid中子元素默认为block元素
  7. 当 % 与 fr 可以共存,计算方式,总宽度减去百分比的宽度,将剩下的全部分给fr 
  8. 当auto, fr, % 都是相对单位,都可以触发自动计算机制,尽可能不要同时出现 
  9. fr为动态值

代码

  1. div{
  2.             display: grid;
  4.             /* 1. 设置轨道的列宽 */
  5.             grid-template-columns: 10em 10em 10em;
  6.             /* 设置轨道宽度时可以使用一个新的单位: fr (fraction),类似flex中的伸缩因子 */
  7.             grid-template-columns: 1fr 1fr 1fr;
  8.              /* 2. 设置轨道的行高 */
  9.              grid-template-rows: 5em 5em;
  10.             /* 3. 设置轨道的间距 */
  11.             /* gap: 水平 垂直 */
  12.             gap: 1em 2em;
  13.             /* 如果水平和垂直间距一样可缩写gap: 1em */
  14.             gap: 1em;
  15.         }
  16.         /* 设置网格单元尺寸的常用函数: repeat(),minmax() */
  17.         div{
  18.             /* 1. reapeat() 设置列宽*/
  19.             /* 第一个参数为列数 第二个参数为列的宽度 */
  20.             grid-template-columns: repeat(3, 10em);
  21.             /* 第二个参数可以是多个值 */
  22.             grid-template-columns: repeat(3, 10em 2em);
  23.             /* 单个单元格固定其他自适应  fr为动态值*/
  24.             grid-template-columns: repeat(3, 1fr 2fr);
  25.             /* 2. minmax() 最小宽度*/
  26.              /* 表示中间列的最小宽度是20em,最大宽高位左右宽度的2倍 */
  27.             grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
  28.             /* 表示为第一固定 第二位最宽度20em最大宽度为第一个的1倍 */
  29.             grid-template-columns: 20em minmax(20em, 1fr);
  30.         }
  31.         /* 网格项目: 网格容器中的"子元素" , 与flex是一样的 */
  32.         div>span{
  33.             background-color: chocolate;
  34.             border: #000 1px solid;
  35.         }

2.网格单元的排列方式与隐式轨道

  1.      排列方式 : grid-auto-flow
  2.      隐式轨道的行高: grid-auto-rows 
  3.      隐式轨道的列宽: grid-auto-columns 
  5.      当声明的网格单元数量已经不够存入所有的网格项目时 */
  6.      此时,多出的项目会自动放入到自动生成的网格空间中 */
  7.      这时,原来声明的网格单元叫: 显式轨道;新项目显示的轨道称为: 隐式轨道

代码

  1. div{
  2.             /* 此时,默认项目在容器中按: 先行后列的顺序排列,“行优先” */
  3.             grid-auto-flow: row;
  4.             /* 自动生成的隐式轨道的高度是自动的 */
  5.             /* 行优先时要设置隐式轨道的行高 */
  6.             grid-auto-rows: 5em;
  8.             /* 列优先 */
  9.             grid-auto-flow: column;
  10.             /* 列优时要设置的隐式轨道的列宽 */
  11.             grid-auto-columns: 1fr;
  12.         }

3.使用grid-area:自定义项目在容器的显示位置

  1.     grid-area: 参数数量不同,意义不同
  2.         注 1. 值中只有span
  3.         1.1 单值: 跨的行数
  4.         1.2 双值: 跨的行与列数,如果只想设置列数,就必须设置行数(auto)
  6.         2. 值中有span和编号
  7.         2.1 双值: 没有span,默认跨1行1列, grid-area: 2  / 3 ;
  8.         2.2 三值: 省了列结束编号或跨的数量,此时前面的值可使用auto
  9.         2.3 四值: 最完整的语法

代码

  1. /* 使用grid-area:自定义项目在容器的显示位置 */
  2.         div{grid-template-columns: 1fr 1fr 1fr;grid-auto-flow: row;}
  3.         /* 编号从左上角开始(1,1),并递增 */
  4.         /* grid-area: 设置任何一个项目所在的网格单元的区域 */
  5.         /* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号  */
  6.         div>span:nth-of-type(2){
  7.             background-color: cornsilk;
  8.             /* 原始位置 */
  9.             grid-area: 1/1/2/2;
  10.             /* 跨行 */
  11.             grid-area: -2/1/3/4;
  12.             /* 跨列 */
  13.             grid-area: 1/2/4/4;
  14.             /* span站位关键字 */
  15.             grid-area: 1/1 / span 2;
  17.             grid-area: 参数数量不同,意义不同
  18.         }

整体代码

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>grid网格容器/网格项目/网格轨道/轨道间距</title>
  8.     <style>
  9.         /* 1. 网格容器: 由若干个矩形网格单元构成 */
  10.         /* 2. 网格项目: 网格容器的子元素,必须放在网络单元中 */
  11.         /* 3. 网格单元: 有"单元格"和"网格区域"二种表现形式*/
  12.         /* 4. 网格轨道: 由多个网格单元组成,根据排列方向有"行轨"和"列轨"之分 */
  13.         /* 5. 轨道间距: 容器中轨道之间的间距,有"行轨间距","列轨间距"  */
  14.         /*注 flex中子元素默认为inline元素,grid中子元素默认为block元素
  15.           当 % 与 fr 可以共存,计算方式,总宽度减去百分比的宽度,将剩下的全部分给fr 
  16.           当auto, fr, % 都是相对单位,都可以触发自动计算机制,尽可能不要同时出现 
  17.           fr为动态值
  18.         */
  19.         div{
  20.             display: grid;
  22.             /* 1. 设置轨道的列宽 */
  23.             grid-template-columns: 10em 10em 10em;
  24.             /* 设置轨道宽度时可以使用一个新的单位: fr (fraction),类似flex中的伸缩因子 */
  25.             grid-template-columns: 1fr 1fr 1fr;
  26.              /* 2. 设置轨道的行高 */
  27.              grid-template-rows: 5em 5em;
  28.             /* 3. 设置轨道的间距 */
  29.             /* gap: 水平 垂直 */
  30.             gap: 1em 2em;
  31.             /* 如果水平和垂直间距一样可缩写gap: 1em */
  32.             gap: 1em;
  33.         }
  34.         /* 设置网格单元尺寸的常用函数: repeat(),minmax() */
  35.         div{
  36.             /* 1. reapeat() 设置列宽*/
  37.             /* 第一个参数为列数 第二个参数为列的宽度 */
  38.             grid-template-columns: repeat(3, 10em);
  39.             /* 第二个参数可以是多个值 */
  40.             grid-template-columns: repeat(3, 10em 2em);
  41.             /* 单个单元格固定其他自适应  fr为动态值*/
  42.             grid-template-columns: repeat(3, 1fr 2fr);
  43.             /* 2. minmax() 最小宽度*/
  44.              /* 表示中间列的最小宽度是20em,最大宽高位左右宽度的2倍 */
  45.             grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
  46.             /* 表示为第一固定 第二位最宽度20em最大宽度为第一个的1倍 */
  47.             grid-template-columns: 20em minmax(20em, 1fr);
  48.         }
  49.         /* 网格项目: 网格容器中的"子元素" , 与flex是一样的 */
  50.         div>span{
  51.             background-color: chocolate;
  52.             border: #000 1px solid;
  53.         }
  54.         /* 网格单元的排列方式与隐式轨道 */
  55.         /* 
  56.         1. 排列方式 : grid-auto-flow
  57.         2. 隐式轨道的行高: grid-auto-rows 
  58.         3. 隐式轨道的列宽: grid-auto-columns 
  59.         */
  60.         /* 当声明的网格单元数量已经不够存入所有的网格项目时 */
  61.         /* 此时,多出的项目会自动放入到自动生成的网格空间中 */
  62.         /* 这时,原来声明的网格单元叫: 显式轨道;新项目显示的轨道称为: 隐式轨道 */
  63.         div{
  64.             /* 此时,默认项目在容器中按: 先行后列的顺序排列,“行优先” */
  65.             grid-auto-flow: row;
  66.             /* 自动生成的隐式轨道的高度是自动的 */
  67.             /* 行优先时要设置隐式轨道的行高 */
  68.             grid-auto-rows: 5em;
  70.             /* 列优先 */
  71.             grid-auto-flow: column;
  72.             /* 列优时要设置的隐式轨道的列宽 */
  73.             grid-auto-columns: 1fr;
  74.         }
  81.         /* 使用grid-area:自定义项目在容器的显示位置 */
  82.         div{grid-template-columns: 1fr 1fr 1fr;grid-auto-flow: row;}
  83.         /* 编号从左上角开始(1,1),并递增 */
  84.         /* grid-area: 设置任何一个项目所在的网格单元的区域 */
  85.         /* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号  */
  86.         div>span:nth-of-type(2){
  87.             background-color: cornsilk;
  88.             /* 原始位置 */
  89.             grid-area: 1/1/2/2;
  90.             /* 跨行 */
  91.             grid-area: -2/1/3/4;
  92.             /* 跨列 */
  93.             grid-area: 1/2/4/4;
  94.             /* span站位关键字 */
  95.             grid-area: 1/1 / span 2;
  97.             grid-area: 参数数量不同,意义不同
  98.             /*注 1. 值中只有span
  99.             1.1 单值: 跨的行数
  100.             1.2 双值: 跨的行与列数,如果只想设置列数,就必须设置行数(auto)
  102.             2. 值中有span和编号
  103.             2.1 双值: 没有span,默认跨1行1列, grid-area: 2  / 3 ;
  104.             2.2 三值: 省了列结束编号或跨的数量,此时前面的值可使用auto
  105.             2.3 四值: 最完整的语法  */
  106.         }
  108.     </style>
  109. </head>
  110. <body>
  111.     <div>
  112.         <span class="span">1</span>
  113.         <span class="span">2</span>
  114.         <span class="span">3</span>
  115.         <span class="span">4</span>
  116.         <span class="span">5</span>
  117.         <span class="span">6</span>
  118.         <span class="span">7</span>
  119.         <span class="span">8</span>
  120.         <span class="span">9</span>
  121.     </div>
  123. </body>
  124. </html>

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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>grid布局</title>
  8.     <style>
  9.         *{margin: 0;padding: 0;box-sizing: border-box;}
  10.         body{
  11.             display: grid;
  12.             grid-template-columns: 20em 1fr 20em;
  13.             grid-template-rows: 8vh calc(84vh - 32px) 8vh;
  14.             gap: 1em;
  15.         }
  16.         body>*{
  17.             /* border: #000 1px solid; */
  18.         }
  19.         header,footer{
  20.             background-color: cornsilk;
  21.             grid-area: span 1 / span 3;
  22.         }
  23.         main{
  24.             background-color: cyan;
  25.             grid-area: 2/2;
  27.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <header>header</header>
  33.     <main>主体</main>
  34.     <aside>左侧栏</aside>
  35.     <aside>右侧栏</aside>
  36.     <footer>footer</footer>
  37. </body>
  38. </html>

实例图片

上一条：grid网格布局下一条：手把手玩转Grid网格布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多