微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 1224-实例演示全部grid属性
博主信息
博文 37
粉丝 2
评论 0
访问量 34605
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
1224-实例演示全部grid属性
世纪天城
原创
1022人浏览过

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

实例图片

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录