Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 1224-实例演示全部grid属性
Blogger Information
Blog 37
fans 2
comment 0
visits 26675
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
1224-实例演示全部grid属性
世纪天城
Original
799 people have browsed it

作业内容：将今晚提及的全部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>

实例图片

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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