grid-layout(网格布局)初探

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <link rel="stylesheet" href="zjy字体图标/style.css" />
        <style type="text/css" id="css">
/*创建了一个三列轨道网格*/
.wrapper {
  /*创建一个网格布局*/
  display: grid; 
  /*创建了3列,三列宽度相等    且等同: grid-template-columns:1fr 1fr 1fr;     注:fr是减去固定位置的宽度,然后把剩下的宽度进行比列分割*/
  grid-template-columns: repeat(3, 1fr); 
  /*网格单元格行和列的间距都为10px  等同:grid-column-gap:10px grid-row-gap=10px*/
  grid-gap: 10px;
  /*网格单元行(长)的最小宽度为100px,最大为自动适应宽度*/
  grid-auto-rows: minmax(100px, auto);
}
/*单元格是网格线交织而形成的封闭空间*/
.one {
  background-color: red;
  /*这一个单元格的列网格线是从 1到3*/
  grid-column: 1 / 3;
  /*这一个单元格的行网格线是 1,这个没有围成一个封闭的空间,但是由于是列为auto,所以他补全了第三个单元上面的空隙*/ 
  grid-row: 1/3;
}
.two { 
  background: palegoldenrod;
  /*这一个单元格的列网格线是从 2到4*/
  grid-column: 2 / 4;
  /*这一个单元格的行网格线是 1到3*/ 
  grid-row: 1 / 3;
}
.three {                                 
  background: pink;
  /*这一个单元格的列网格线是1*/
  grid-column: 1;
   /*这一个单元格的行网格线是 2到5  出现最大列*/ 
  grid-row: 2 / 5;
}
.four {
    background: deepskyblue;
    /*这一个单元格的列网格线是3*/
  grid-column: 3;
   /*这一个单元格的行网格线是 1到3*/
  grid-row: 3;
}
.five {
    background: yellow;
    /*这一个单元格的列网格线是2*/
  grid-column: 2;
   /*这一个单元格的行网格线是4*/
  grid-row: 4;
}
.six {
   background: greenyellow;
   /*这一个单元格的列网格线是3*/
  grid-column: 3;
  /*这一个单元格的行网格线是 4*/
  grid-row: 4;
}
/*总结:1.列已经在父元素wraper中已经确定为三列,三列就有4个列网格线
 *     2.第三个中单元格中,出现了最大的网格线为5,说明有4行。
 *     2.说明一个网格布局中总共有4行3列,12个单元格
 *     
 *     4.一个区域可以由行网格线和列的网格线序号来确定(当然,也可以自己给网格线取名字)
 *     5.其中,如果有的行是单个或者列是单个数字,没有组成一个封闭区域,但是auto可以自动的补全。
 *     6.如果列的高度如果确定,可以尝试一下单个数字的效果,嗯,电脑没电了
 * 
 * */

        </style>
    </head>
    <body>
    
 <div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
 </div>
   
     </body>
</html>

 

 

 

posted on 2018-09-23 16:39  锦瑟浮生丶  阅读(524)  评论(0编辑  收藏  举报