search

博客列表 >Grid布局属性复习（1230前端开发学习）

Grid布局属性复习（1230前端开发学习）

小辰
小辰原创
2020年01月06日 23:56:42543浏览

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布局，这样布局就方便多了。

上一条：元旦作业+购物车结算页面的编写+10期线上班下一条：精选 - 微信域名检测接口（微信官方api）和请求示例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多