CSS 之Grid网格大致知识梳理1

CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局，而它的一些主要应用属性如下：

1.将父容器的display属性值设置为grid 即可将其转换为网格容器；

2.在网格容器中添加列的属性：grid-template-columns;

ag：

 <div class="container">
   <div class="d1">1</div>
   <div class="d2">2</div>
   <div class="d3">3</div>
   <div class="d4">4</div>
   <div class="d5">5</div>
 </div>

 <style>
   .d1{background:LightSkyBlue;}
   .d2{background:LightSalmon;}
   .d3{background:PaleTurquoise;}
   .d4{background:LightPink;}
   .d5{background:PaleGreen;}

   .container {
     font-size: 40px;
     width: 100%;
     background: LightGray;
     display: grid;
     /* add your code below this line */
   grid-template-columns:100px 100px 100px;

     /* add your code above this line */
   }
 </style>

效果：

 3.在网格容器中添加行的属性：grid-template-rows;(用法与添加列的方法一致)；

4.改变行/列尺寸的单位有：fr :可用区域；auto:自定义尺寸；  xxpx:具体的px值；

5.创建空白列宽（列间隙）：grid-columns-gap；

     ag:以上同一个栗子，修改其父元素contain的属性，代码如下：

        

 .container {
     font-size: 40px;
     min-height: 300px;
     width: 100%;
     background: LightGray;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;

     grid-column-gap:20px;     //列宽20px;

   }

效果如下：

 6.创建行间隙：grid-row-gap;(用法同添加列间隙一致)；

7.由5,6条综合，为了更方便的创建行间距与列间隙（快捷方式）：grid-gap属性；

8.改变一个网格中的一个方格占据的列宽：grid-column;该属性的工作原理：以下的表格中列从左往右数，行从上往下数；

还是以上的栗子，改变其item5的样式：

 .item5 {
     background: PaleGreen;

     grid-column:2/4;  //从第二条列间隙—第四条，即从第二列到第三列

   }

效果如下：

9.改变一个方格的占据行高：grid-row属性；（原理同上）；

10.单元格与单元格对齐的属性设置：justify-self；

        该属性接收以下参数：stretch:默认填充整个单元格；  start：左对齐；  center:居中对齐；  end:右对齐；

11.单元格与单元格垂直方向对齐设置：align-self属性；（接受的值与垂直方向一致）

12.水平方向上对齐所有的项：justify-items;(接收参数与以上对齐属性接收的值一致）；

13.垂直方向上对齐所有的项的属性;align-items;(接收参数与以上对齐属性接收的值一致）；