登录  /  注册
首页 > 博客列表 > Grid布局属性复习（1230前端开发学习）
博主信息
博文 26
粉丝 0
评论 2
访问量 34208
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Grid布局属性复习（1230前端开发学习）
小辰
原创
517人浏览过

1.手写属性图


2.效果图

3.上代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>对grid属性的实验</title>
  5.     <style type="text/css">
  6.         /*设置网格虚线边框*/
  7.         * :not(body){
  8.             outline: 1px dashed blue;
  9.         }
  10.         .container{
  11.             width: 800px;
  12.             /*font-size: 2rem;*/
  13.             /*划分四列三行*/
  14.             display: grid;
  15.             grid-template-columns: repeat(4,1fr);
  16.             grid-template-rows: repeat(3, 1fr);
  17.             /*设置扩展后的隐式网格,只可以扩展行高*/
  18.             grid-auto-rows:200px;
  19.             /*设置格子之间的间距,上左下右*/
  20.             grid-gap:5px ;
  21.             /*设置  所有  项目的对齐方式居中*/
  22.             /*place-items:center;*/
  23.         }
  24.         .container > .item:first-of-type {
  25.             /*一号占据两格*/
  26.             grid-area:1/1/2/3;
  27.             background-color: red;
  28.             /*对项目进行编号*/
  29.             /*从第三列开始*/
  30.             /*grid-column-start: 3;*/
  31.             /*从第五列结束*/
  32.             /*grid-column-end: 5;*/
  33.             /*从第二行开始，从第四行结束，第几行主要是行号*/
  34.             grid-row-start:2;
  35.             grid-row-end:4;
  36.             /*设置 单个  项目在单元格的对齐方式*/
  37.             /*place-self:center;*/
  38.         }
  40.             /*使其正常需要注释掉字体大小*/
  41.         .row {
  42.             display: grid;
  43.             /* 平均等比分成12份 */
  44.             grid-template-columns: repeat(12, 1fr);
  46.             grid-column-gap: 8px;
  48.             height: 50px;
  49.             margin-bottom: 10px;
  51.             background-color: #eeeeee;
  52.         }
  53.         .col-1 {
  55.             grid-column-end: span 1;
  56.         }
  57.         .col-2 {
  58.             grid-column-end: span 2;
  59.         }
  60.         .col-3 {
  61.             grid-column-end: span 3;
  62.         }
  63.         .col-4 {
  64.             grid-column-end: span 4;
  65.         }
  66.         .col-5 {
  67.             grid-column-end: span 5;
  68.         }
  69.         .col-6 {
  70.             grid-column-end: span 6;
  71.         }
  72.         .col-7 {
  73.             grid-column-end: span 7;
  74.         }
  75.         .col-8 {
  76.             grid-column-end: span 8;
  77.         }
  78.         /*对15网格的命名划分*/
  79.          .item15 {
  80.             width: 600px;
  81.             height: 150px;
  82.             font-size: 2rem;
  84.             display: grid;
  86.             /* 给每一个单元格命名 */
  87.             grid-template-areas: 'a b'
  89.         }
  91.         .item15 > .item:first-of-type {
  92.             /* 项目命名: grid-area */
  93.             grid-area: a;
  94.             background-color: lightgreen;
  95.         }
  97.     </style>
  98. </head>
  99. <body>
  100.     <div class="container">
  101.         <div class="item">1</div>
  102.         <div class="item">2</div>
  103.         <div class="item">3</div>
  104.         <div class="item">4</div>
  105.         <div class="item">5</div>
  106.         <div class="item">6</div>
  107.         <div class="item">7</div>
  108.         <div class="item">8</div>
  109.         <div class="item">9</div>
  110.         <div class="item">10</div>
  111.         <div class="item">11</div>
  112.         <div class="item">12</div> 
  113.          <div class="row">
  114.             <span class="item col-2">2列</span>
  115.             <span class="item col-3">3列</span>
  116.         </div>
  117.         <div class="item15">
  118.         <span>1</span>
  119.         <span>1</span>
  120.         </div>
  121.     </div>
  122. </body>
  123. </html>

4.小结

通过对grid属性的复习，我对grid布局有了进一步的了解，grid布局的方法比较多，我还比较倾向于，划分好网格，就像圣杯布局，我只要按照顺序在里面
添加东西，在划分号的特定区域里，进行felx布局，这样布局就方便多了。

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

批改状态：合格

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

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

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

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