position:sticky和display:grid

position:sticky

首先介绍一下position:sticky。positin:sticky是一个新的CSS3属性，它的表现类似于position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像是position:relative一样。而当页面滚动超出区域时，它的行为就像是position:fixed一样，固定在目标位置。它可以设置top，left，right，bottom，默认设置只有没有任何变化。譬如当你设置top:0，当这个元素距离上为0时，就变成了固定定位。

.sticky { 
position: -webkit-sticky; 
position:sticky; 
top: 0px;  
}

另外需要注意的是，如果同时定义left和right时，left生效，right失效。同样，如果同时定义top和bottom时，top生效，bottom失效。

但是它的兼容性很差，就连google都不能全部支持。

image.png

display:grid

display:grid是一种CSS3的布局方式，也可以叫做网格布局。
首先设置网格的父级元素为display:grid。

grid-template-colums:20% 20% 10% 10px 100px;
grid-template-rows:auto 10px auto 10px auto;

grid-template-colums就是表示第一列20%，第二列20%（次列可作为列与列之间的间隙）
grid-template-rows就是表示第一行高度自适应内容，第二行高度为10px(此列可作为列与列之间的间隙)

<div class="wrapper">
    <div class="box a">A</div>
    <div class="box b"></div>
    <div class="box c">C</div>
    <div class="box d"></div>
    <div class="box e">E</div>
    <div class="box f"></div>
    <div class="box g"></div>
    <div class="box h"></div>
    <div class="box i"></div>
    <div class="box j"></div>
    <div class="box k">K</div>
    <div class="box l"></div>
    <div class="box m">M</div>
    <div class="box n"></div>
    <div class="box o">O</div>
</div>

     .wrapper {
            display: grid;
            grid-template-columns: 100px 10px 100px 10px 100px;
            grid-template-rows: auto 10px auto;
        }

        .box {
         .box {
            background-color: #444;
            color: #fff;
            font-size: 150%;
            line-height: 60px;
            text-align: center;
        }
        .b,.d,.f,.g,.h,.i,.j,.l,.n{
            background-color: #1D8FEE;
        }

这只是画出了一个表格，我们还可以选到每个表格

 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

 grid-column: 1 / 2;
 grid-row: 1 / 2;

还可以进一步缩写

 grid-area: 3/5/4/6;

分别代表
行起始位置/列起始位置/行结束位置/列结束位置

当然他的兼容性也不怎么友好

image.png